SwiftUIでアプリ。　リストについて

List | Apple Developer Documentation

アップルの公式リファレンスをもとに実行しながら確認していきます。

一番単純なリストです。 List ()のみを使って簡単にリスト表示させることができます。　　SwiftPlaygroundsで実行していきます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Text("一番目のリスト")
            Text("二番目のリスト")
            Text("三番目のリスト")
        }
    }
}

実行すると

同じデータ型のリストを作る時には構造体でデータ型を指定して表示させる方法があります。

データの型を指定した構造体

struct Ocean: Identifiable {
    let name: String
    let id = UUID()
}

これはプロパティに文字型の"name"と一意の番号"id"を持っています。

この構造体のデータ型にあったデータをリストに表示させます。

struct ContentView: View {
    
    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)
        }
    }
}

ContentView{}の直下で構造体にあったデータを変数に入れていきます。

private var oceans = [
　　Ocean(name: "Pacific"),
　　Ocean(name: "Atlantic"),
　　Ocean(name: "Indian"),
　　Ocean(name: "Southern"),
　　Ocean(name: "Arctic")
]

このデータを"body"の中で連続して表示させます。

List(oceans) {
　　Text($0.name)
}

$0.nameで全てのデータの"name"を取り出します。

次は選択できるリストです。選択するには"EditButton"を追加します。

.toolbar { EditButton() }

SwiftPlaygroundsではうまく動かなかったのでXcodeを使ってみるとうまく表示。

truct 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")
]


struct ContentView: View {
    
    @State private var multiSelection = Set<UUID>()
    
    var body: some View {
        NavigationView {
            
            VStack{
                List(oceans, selection: $multiSelection) {
                    Text($0.name)
                }
                .navigationTitle("Oceans")
                .toolbar { EditButton() }
                        
                Text("\(multiSelection.count) selections")
            }          
        } 
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

"Set"を使うと選択できるようになります。

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

 あと公式ページのコードをそのままXcodeで実行させても別画面と認識されてしまいます。

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

をVStack{}の中に入れてるとうまくので今回はVStack{}の中に入れて実行しています。

Editボタンを押し選択していくと下のテキストに選択されているリストの数が反映されます。