SwiftUI List如何添加索引实现交替背景色（系统/自定义颜色）

需求：在SwiftUI List里给行添加交替背景色，现有代码用ForEach($listViewModel.items)绑定数据渲染行，需要参考示例中通过索引实现交替色的方式，但不知道怎么给带绑定的ForEach添加索引。

现有代码：

import SwiftUI

struct FriendshipListView: View {
    
    @EnvironmentObject var listViewModel: MenuListFriendshipViewModel
    
    var body: some View {
        NavigationView {
            List {
                //Use the $ syntax to pass a binding on to the subviews
                ForEach($listViewModel.items) { $item in
                    MenuListRowView(item: $item)
                }
            }
            .navigationBarTitle(Text("Friendships / Relationships"))
            .listStyle(PlainListStyle())
        }
    }
}

struct ListView_Previews: PreviewProvider {
    static var previews: some View {
        FriendshipListView()
        .environmentObject(MenuListFriendshipViewModel())
    }
}

参考示例代码：

List {
    ForEach(items.indices) { index in
        Text(items[index])
            .listRowBackground((index  % 2 == 0) ? Color(.systemBlue) : Color(.white))
    }
}

解决方案 #

要给带绑定的ForEach添加索引并实现交替背景色，这里有两种可行的实现方式：

方法1：通过enumerated()创建自定义绑定 #

遍历数组的同时拿到索引，手动构建绑定传递给子视图：

import SwiftUI

struct FriendshipListView: View {
    
    @EnvironmentObject var listViewModel: MenuListFriendshipViewModel
    
    var body: some View {
        NavigationView {
            List {
                // 用enumerated()同时获取索引和元素，id绑定到element的id（需元素符合Identifiable）
                ForEach(Array(listViewModel.items.enumerated()), id: \.element.id) { index, _ in
                    // 手动创建绑定，通过索引读写数组元素
                    let itemBinding = Binding(
                        get: { listViewModel.items[index] },
                        set: { listViewModel.items[index] = $0 }
                    )
                    
                    MenuListRowView(item: itemBinding)
                        // 根据索引奇偶设置背景色
                        .listRowBackground(index % 2 == 0 ? Color(.systemGray6) : Color(.white))
                }
            }
            .navigationBarTitle(Text("Friendships / Relationships"))
            .listStyle(PlainListStyle())
        }
    }
}

方法2：直接遍历数组索引获取绑定 #

如果你的数组元素已经遵循Identifiable协议，可以直接遍历索引，通过索引获取绑定：

import SwiftUI

struct FriendshipListView: View {
    
    @EnvironmentObject var listViewModel: MenuListFriendshipViewModel
    
    var body: some View {
        NavigationView {
            List {
                // 遍历数组索引，id用.self标识
                ForEach(listViewModel.items.indices, id: \.self) { index in
                    // 通过$listViewModel.items[index]直接获取绑定
                    MenuListRowView(item: $listViewModel.items[index])
                        .listRowBackground(index % 2 == 0 ? Color(.systemGray6) : Color(.white))
                }
            }
            .navigationBarTitle(Text("Friendships / Relationships"))
            .listStyle(PlainListStyle())
        }
    }
}

注意事项 #

• 两种方法都能通过index % 2 == 0区分奇偶行，你可以替换示例中的颜色为任意系统颜色或自定义颜色
• 确保MenuListFriendshipViewModel中的items是@Published修饰的可变数组，这样绑定才能正常工作
• 如果元素未遵循Identifiable，方法1中需要把id: \.element.id替换为元素的唯一标识属性，或者使用ForEach的带id参数的重载

内容的提问来源于stack exchange，提问作者Kraig Kistler