教育148875 views
高校化学2913383 views
LaTeX957300 views
高校物理158224 views
小学算数1194618 views
中学社会667106 views
いろは2986023 views
高校国語785655 views
Computer365120 views
小学社会308636 views
Help
Tools

English

静的リストと動的リスト

SwiftUI の List には、コードに直接書き込む「静的リスト」と、配列データから生成する「動的リスト」の2種類があります。それぞれの特徴と使い分けを解説します。

静的リスト

静的リストは、List の中にビューを直接記述する方式です。項目が固定されている設定画面などに適しています。

struct SettingsView: View {
    var body: some View {
        List {
            Text("アカウント")
            Text("通知")
            Text("プライバシー")
            Text("ヘルプ")
        }
    }
}

静的リストでは異なる種類のビューを自由に混在させることができます。

struct ProfileView: View {
    var body: some View {
        List {
            Image(systemName: "person.circle.fill")
                .font(.system(size: 60))
            
            Text("ユーザー名")
                .font(.headline)
            
            Label("設定", systemImage: "gear")
            
            Button("ログアウト") {
                // ログアウト処理
            }
            .foregroundColor(.red)
        }
    }
}

動的リスト

動的リストは、配列やコレクションからリストを生成する方式です。データベースや API から取得したデータを表示する場合に使います。

struct TaskListView: View {
    let tasks = ["買い物", "掃除", "洗濯", "料理"]
    
    var body: some View {
        List(tasks, id: \.self) { task in
            Text(task)
        }
    }
}

データが変更されると、リストも自動的に更新されます。@State や @ObservedObject と組み合わせることで、リアクティブな UI を構築できます。

struct TaskListView: View {
    @State private var tasks = ["買い物", "掃除", "洗濯"]
    
    var body: some View {
        List(tasks, id: \.self) { task in
            Text(task)
        }
        
        Button("タスク追加") {
            tasks.append("新しいタスク")
        }
    }
}

静的と動的の混在

List と ForEach を組み合わせることで、静的な要素と動的な要素を1つのリストに混在させることができます。

struct MixedListView: View {
    let recentItems = ["項目1", "項目2", "項目3"]
    
    var body: some View {
        List {
            // 静的な要素
            Section("アクション") {
                Label("新規作成", systemImage: "plus")
                Label("検索", systemImage: "magnifyingglass")
            }
            
            // 動的な要素
            Section("最近の項目") {
                ForEach(recentItems, id: \.self) { item in
                    Text(item)
                }
            }
        }
    }
}
静的リスト

項目が固定、異なる種類のビューを混在可能、設定画面向き

動的リスト

データから自動生成、配列の変更に追従、一覧表示向き

アプリの要件に応じて、静的リストと動的リストを適切に使い分けましょう。