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)")
}
}
}