【SwiftUI】ListViewについて

SwiftUI

ListViewとは

複数のアイテムを表示するためのUIコンポーネントです。TableViewの代替として使用され、より簡潔な実装が可能です。

基本的な使い方

import SwiftUI

struct ContentView: View {
    let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]

    var body: some View {
        NavigationView {
            List(items, id: \.self) { item in
                Text(item)
            }
            .navigationTitle("リスト")
        }
    }
}

重要なパラメータ

1. データの識別

// id パラメータを使用する方法
List(items, id: \.self)

// Identifiableプロトコルを採用する方法
struct Item: Identifiable {
    let id = UUID()
    let title: String
}

List(items) { item in /* ... */ }

2. スタイルのカスタマイズ

List {
    ForEach(items, id: \.self) { item in
        Text(item)
    }
}
.listStyle(.plain)         // プレーンスタイル
.listStyle(.grouped)       // グループ化スタイル
.listStyle(.inset)        // インセットグループスタイル
.listStyle(.sidebar)      // サイドバースタイル

3. セクション分け

struct ContentView: View {
    let sections = ["フルーツ", "野菜"]
    let items = [
        ["りんご", "バナナ"],
        ["にんじん", "トマト"]
    ]

    var body: some View {
        List {
            ForEach(0..<sections.count) { section in
                Section(header: Text(sections[section])) {
                    ForEach(items[section], id: \.self) { item in
                        Text(item)
                    }
                }
            }
        }
    }
}

高度なカスタマイズ

1. スワイプアクション

List {
    ForEach(items, id: \.self) { item in
        Text(item)
            .swipeActions(edge: .trailing) {
                Button(role: .destructive) {
                    // 削除処理
                } label: {
                    Label("削除", systemImage: "trash")
                }
            }
            .swipeActions(edge: .leading) {
                Button {
                    // お気に入り処理
                } label: {
                    Label("お気に入り", systemImage: "star")
                }
                .tint(.yellow)
            }
    }
}

2. 選択機能

struct ContentView: View {
    @State private var selection = Set<String>()
    let items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List(items, id: \.self, selection: $selection) { item in
            Text(item)
        }
        .environment(\.editMode, .constant(.active)) // 常に選択可能
    }
}

3. リストの編集

struct ContentView: View {
    @State private var items = ["Item 1", "Item 2", "Item 3"]

    var body: some View {
        List {
            ForEach(items, id: \.self) { item in
                Text(item)
            }
            .onDelete { indexSet in
                items.remove(atOffsets: indexSet)
            }
            .onMove { source, destination in
                items.move(fromOffsets: source, toOffset: destination)
            }
        }
        .toolbar {
            EditButton() // 編集ボタンを追加
        }
    }
}

パフォーマンスの最適化

大量のデータを扱う場合は、LazyVStackとの組み合わせやScrollViewReaderの使用を検討してください:

List {
    LazyVStack {
        ForEach(0..<1000) { index in
            Text("Row \(index)")
        }
    }
}

Buy me a coffee!

SwiftUIアプリ開発
シェアする
sogaをフォローする
タイトルとURLをコピーしました