List の背景色や行の背景色を変更することで、アプリのデザインに合わせたカスタマイズが可能です。
行の背景色を変更
listRowBackground モディファイアで各行の背景を設定します。
struct ContentView: View { let items = ["りんご", "みかん", "バナナ"] var body: some View { List(items, id: \.self) { item in Text(item) .listRowBackground(Color.yellow.opacity(0.3)) } } }
Color だけでなく、任意のビューを背景に設定できます。
Text(item) .listRowBackground( LinearGradient( colors: [.blue.opacity(0.1), .purple.opacity(0.1)], startPoint: .leading, endPoint: .trailing ) )
条件に応じた背景色
データの状態に応じて背景色を変えることで、視覚的なフィードバックを提供できます。
struct Task: Identifiable { let id = UUID() var title: String var priority: Priority enum Priority { case high, medium, low } } struct TaskListView: View { let tasks = [ Task(title: "緊急タスク", priority: .high), Task(title: "通常タスク", priority: .medium), Task(title: "後でやる", priority: .low) ] var body: some View { List(tasks) { task in Text(task.title) .listRowBackground(backgroundColor(for: task.priority)) } } func backgroundColor(for priority: Task.Priority) -> Color { switch priority { case .high: return Color.red.opacity(0.2) case .medium: return Color.yellow.opacity(0.2) case .low: return Color.green.opacity(0.2) } } }
List 全体の背景色
List 全体の背景色を変更するには、scrollContentBackground と background を組み合わせます。
struct ContentView: View { let items = ["A", "B", "C", "D", "E"] var body: some View { List(items, id: \.self) { item in Text(item) .listRowBackground(Color.white) } .scrollContentBackground(.hidden) // デフォルトの背景を非表示 .background(Color.mint.opacity(0.3)) // カスタム背景を設定 } }
.scrollContentBackground(.hidden)
iOS 16 以降で使用可能。List のデフォルト背景を非表示にする。
.background()
非表示にした後、任意の色やビューを背景として設定。
行の背景を透明にする
背景を完全に透明にして、下のレイヤーを見せることもできます。
List(items, id: \.self) { item in Text(item) .listRowBackground(Color.clear) } .scrollContentBackground(.hidden) .background { Image("backgroundImage") .resizable() .scaledToFill() .ignoresSafeArea() }
セクションごとの背景
Section 内の各行に異なる背景を設定する例です。
List { Section("重要") { ForEach(["タスク1", "タスク2"], id: \.self) { item in Text(item) .listRowBackground(Color.red.opacity(0.1)) } } Section("通常") { ForEach(["タスク3", "タスク4"], id: \.self) { item in Text(item) .listRowBackground(Color.blue.opacity(0.1)) } } }
注意点
listRowBackground
行単位の背景を変更。Color や View を指定可能。
scrollContentBackground
List 全体の背景表示を制御。.hidden で非表示にしてから background で上書きする。
背景色のカスタマイズは、情報の優先度を視覚的に伝えたり、ブランドカラーを反映させたりする際に役立ちます。ただし、読みやすさを損なわないよう、テキストとのコントラストには注意しましょう。
