構造体


List



特定のルート型から特定の結果になる値型へのキーパス。




宣言


struct List<SelectionValue, Content> where SelectionValue : Hashable, Content : View



概要


最も単純な形式では、以下の例に示すように、List はそのコンテンツを静的に作成します。


var body: some View {

List {

Text("A List Item")

Text("A Second List Item")

Text("A Third List Item")

}

}



より一般的には、基礎となるデータのコレクションから動的にリストを作成します。以下の例は、Identifiable に準拠する Ocean 型の配列から単純なリストを作成する方法を示しています。


struct Ocean: Identifiable {

let name: String

let id = UUID()

}

private var oceans = [

Ocean(name: "Pacific"),

Ocean(name: "Atlantic"),

Ocean(name: "Indian"),

Ocean(name: "Southern"),

Ocean(name: "Arctic")

]


var body: some View {

List(oceans) {

Text($0.name)

}

}




List での選択のサポート


list のメンバーを選択可能にするには、選択変数への結束を提供します。リストデータの Identizable.ID 型の単一のインスタンスに結束すると、単一選択リストを作成できます。Set に結束すると、複数の選択をサポートするリストを作成できます。以下の例は、前の例に複数選択を追加する方法を示しています。リストの下の Text ビューには、現在選択されている項目の数が表示されます。


struct Ocean: Identifiable, Hashable {

let name: String

let id = UUID()

}

private var oceans = [

Ocean(name: "Pacific"),

Ocean(name: "Atlantic"),

Ocean(name: "Indian"),

Ocean(name: "Southern"),

Ocean(name: "Arctic")

]

@State private var multiSelection = Set<UUID>()


var body: some View {

NavigationView {

List(oceans, selection: $multiSelection) {

Text($0.name)

}

.navigationTitle("Oceans")

.toolbar { EditButton() }

}

Text("\(multiSelection.count) selections")

}





List コンテンツの更新


標準の更新コントロールを使用して list のコンテンツを更新可能にするには、refreshable(action:) 修飾子を使用します。


以下の例は、標準の更新コントロールを list に追加する方法を示しています。ユーザがリストの一番上を下方向にドラッグすると、SwiftUI は更新コントロールを表わし、指定されたアクションを実行します。action クロージャ内で await 式を使用して、データを更新して下さい。更新インジケータは、待機中の操作の間表示されたままになります。


struct Ocean: Identifiable, Hashable {

let name: String

let id = UUID()

let stats: [String: String]

}

class OceanStore: ObservableObject {

@Published var oceans = [Ocean]()

func loadStats() async -> Void {}

}

@EnvironmentObject var store: OceanStore

var body: some View {

NavigationView {

List(store.oceans) { ocean in

HStack {

Text(ocean.name)

StatsSummary(stats: ocean.stats) // A custom view for showing statistics.

}

}

.refreshable {

await store.loadStats()

}

.navigationTitle("Oceans")

}

}



多次元リストのサポート


2 次元リストをサポートするために、リストのコンテンツで Section 型のインスタンスを作成し、それが独自のコンテンツを提供できるようになります。


以下の例では、世界の大洋にちなんで名付けられたセクションを作成しますが、各セクションには、それらの大洋に接続された主要な海にちなんで名付けられた Text の子があります。この例では、この例の Sea の型の id で識別される単一のリスト項目を選択することもできます。


struct ContentView: View {

struct Sea: Hashable, Identifiable {

let name: String

let id = UUID()

}

struct OceanRegion: Identifiable {

let name: String

let seas: [Sea<]

let id = UUID()

}

private let oceanRegions: [OceanRegion] = [

OceanRegion(name: "Pacific",

seas: [Sea(name: "Australasian Mediterranean"),

Sea(name: "Philippine"),

Sea(name: "Coral"),

Sea(name: "South China")]),

OceanRegion(name: "Atlantic",

seas: [Sea(name: "American Mediterranean"),

Sea(name: "Sargasso"),

Sea(name: "Caribbean")]),

OceanRegion(name: "Indian",

seas: [Sea(name: "Bay of Bengal")]),

OceanRegion(name: "Southern",

seas: [Sea(name:"Weddell")]),

OceanRegion(name: "Arctic",

seas: [Sea(name: "Greenland")])

]

@State private var singleSelection : UUID?


var body: some View {

NavigationView {

List(selection: $singleSelection){

ForEach(oceanRegions) { region in

Section(header: Text("Major \(region.name) Ocean Seas")) {

ForEach(region.seas) { sea in

Text(sea.name)

}

}

}

}

.navigationTitle("Oceans and Seas")

.toolbar { EditButton() }

}

}

}




階層的なリストの作成


ツリー構造のデータと、任意のレベルで子ノードを取得するためのキーパスを提供する children パラメータを提供することにより、任意の深さの階層リストを作成することもできます。以下の例では、カスタムの FileItem 型の深く入り子にされたコレクションを使用して、ファイルシステムのコンテンツをシミュレートします。このデータから作成されたリストは、折りたたみセルを使用して、ユーザがツリー構造をナビゲートできるようにします。


struct ContentView: View {

struct FileItem: Hashable, Identifiable, CustomStringConvertible {

var id: Self { self }

var name: String

var children: [FileItem]? = nil

var description: String {

switch children {

case nil:

return "📄 \(name)"

case .some(let children):

return children.isEmpty ? "📂 \(name)" : "📁 \(name)"

}

}

}

let fileHierarchyData: [FileItem] = [

FileItem(name: "users", children:

[FileItem(name: "user1234", children:

[FileItem(name: "Photos", children:

[FileItem(name: "photo001.jpg"),

  FileItem(name: "photo002.jpg")]),

FileItem(name: "Movies", children:

[FileItem(name: "movie001.mp4")]),

  FileItem(name: "Documents", children: [])

]),

FileItem(name: "newuser", children:

[FileItem(name: "Documents", children: [])

])

]),

FileItem(name: "private", children: nil)

]

var body: some View {

List(fileHierarchyData, children: \.children) { item in

Text(item.description)

}

}

}



リストのスタイル化


SwiftUI は、プラットフォームとリストが表示されるビューの型に基づいて、リストの表示スタイルを選択します。 listStyle(_:) 修飾子を使用して、ビュー内のすべてのリストに異なる ListStyle を適用します。たとえば、"多次元リストの作成" トピックに示されている例に .listStyle(.insetGrouped) を追加すると、以下のスクリーンショットに示すように、insetGrouped スタイルが適用されます。




トピックス



任意のコンテンツでリストを作成



Range からリストを作成



識別可能なデータからリストを作成



データと ID からリストを作成



結束から識別可能なデータへリストを作成



データとIDへの結束からリストを作成



階層的で識別可能なデータからリストを作成



階層的なデータと ID からリストを作成



階層的で識別可能なデータへの結束からリストを作成




階層データと識別子への結束からリストを作成




スタイリングリスト



標準の修飾子の適用


関連



以下に準拠


View



以下も見よ



リスト















トップへ












トップへ












トップへ












トップへ












トップへ












トップへ
目次
Xcode の新機能
  • 利用可能
    • iOS 13.0+
    macOS 10.15+
    Mac Catalyst 13.0+
    tvOS 13.0+
    watchOS 6.0+

  • フレームワーク
    • SwiftUI

    このページには

  • 宣言
  • 概要
  • トピックス
  • 関連
  • 以下も見よ












    • トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ












    トップへ