背景色の変更

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 で上書きする。

背景色のカスタマイズは、情報の優先度を視覚的に伝えたり、ブランドカラーを反映させたりする際に役立ちます。ただし、読みやすさを損なわないよう、テキストとのコントラストには注意しましょう。