【Swift UI】List構造体の使い方！見た目や余白のカスタマイズ

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Text("要素1")
            Text("要素2")
            Text("要素3")
        }
    }
}

List {
    Button {
        print("ボタン1をタップしたよ")
    } label: {
        Text("Button1")
    }
    HStack {
        Button {
            print("ボタン2をタップしたよ")
        } label: {
            Text("Button2")
        }
        Button {
            print("ボタン3をタップしたよ")
        } label: {
            Text("Button3")
        } 
    }
}

List {
    HStack {
        Button {
            print("ボタン2をタップしたよ")
        } label: {
            Text("Button2")
        }.buttonStyle(.borderless)
        Button {
            print("ボタン3をタップしたよ")
        } label: {
            Text("Button3")
        }.buttonStyle(.borderless)
    }
}

struct ContentView: View {
    let langs = ["HTML", "PHP", "Swift"]
    
    var body: some View {
        List(langs, id:\.self) { item in
            Text(item)
        }
    }
}

class User:Identifiable {
    let id:UUID = UUID()
    var name: String = ""
    init(name: String) {
        self.name = name
    }
}

struct ContentView: View {
    let users = [User(name: "John"),User(name: "Michael"),User(name: "Johnny")]
        
    var body: some View {
        List(users) { user in
            Text(user.name)
        }
    }
}

List {
    ForEach(langs, id:\.self) { item in
        Text(item)
    }
}

struct DefaultListStyle      // デフォルト
struct BorderedListStyle     // 標準枠 macOS
struct CarouselListStyle     // カルーセル watchOS
struct EllipticalListStyle   // 楕円 watchOS
struct GroupedListStyle      // グループ化 iOS iPadOS Mac Catalyst TVOS
struct InsetListStyle        // 差し込み iOS iPadOS macOS Mac Catalyst
struct InsetGroupedListStyle // 差し込みグループ化 iOS iPadOS Mac Catalyst
struct PlainListStyle        // プレーン iOS iPadOS Mac Catalyst TVOS watchOS
struct SidebarListStyle      // サイドバー iOS iPadOS macOS Mac Catalyst

.listStyle(.automatic)

.listStyle(.grouped)

.listStyle(.inset)

List{
    Section(header:Text("datalist")) {
        Text("要素1")
        Text("要素2")
        Text("要素3")
    }
}

Text("要素1")
    .listRowSeparator(.hidden)

Text("要素1")
    .listRowSeparatorTint(.orange) 

Text("要素1")
    .listRowSeparatorTint(.red)
Text("要素2")
    .listRowSeparatorTint(.blue)
Text("要素3")
    .listRowSeparatorTint(.green)

.listRowBackground(Color.orange)

.listRowInsets(EdgeInsets(top: 30, leading: 10, bottom: 30, trailing: 10))

struct ContentView: View {
    
    @State  private var multiSelection = Set<UUID>()
    let users = [User(name: "John"),User(name: "Michael"),User(name: "Johnny")]
    
    var body: some View {
        VStack{
            NavigationView {
                List(users,selection: $multiSelection) { user in
                    Text(user.name)
                }.toolbar { EditButton() }
            }
            Text("\(multiSelection.count)個")
        }
    }
}

List(users){ user in
    Text(user.name)
}
.refreshable {
    // await 更新処理
}

struct ContentView: View {
    let langs = ["HTML", "PHP", "Swift","kotlin"]
    
    var body: some View {
        List(langs.indices, id:\.self){ index in
            Text(langs[index])
                .contextMenu {
                    Button {
                        
                    } label: {
                        Label("お気に入り", systemImage: "star")
                    }
                }
        }
    }
}