如何在SwiftUI的List中为每行添加自定义边框？

要给List的整个单元格加边框，核心是让内容容器填满List默认单元格的全部空间——因为List自带的单元格有内边距和默认布局，直接给文本或Section加边框只会作用在内容区域，无法覆盖整行。

修改后的代码如下：

struct ListDemoView: View {
    @State private var nums: [Int] = [1, 2, 3, 4, 5]
    
    var body: some View {
        List(nums, id: \.self) { num in
            // 用容器包裹内容，确保填满单元格
            HStack {
                Text("Num: \(num)")
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity) // 强制撑满单元格所有空间
            .padding() // 给内容和边框留间距，避免视觉拥挤
            .border(num % 2 == 0 ? Color.red : Color.blue) // 根据逻辑切换边框颜色
        }
        .listStyle(.plain) // 可选：用plain样式减少List默认布局干扰
    }
}

关键细节说明： #

• .frame(maxWidth: .infinity, maxHeight: .infinity)：让容器撑满List单元格的全部可用空间，这样边框就能覆盖整行，而不是只围绕文本。
• .padding()：给内容和边框之间添加内边距，让文字不会紧贴边框，视觉更舒适。
• .listStyle(.plain)：如果不需要List默认的分组样式和额外间距，用plain样式能让单元格布局更简洁，边框效果更贴合预期。

如果需要保留Section分组功能，也可以把容器放在Section内部：

struct ListDemoView: View {
    @State private var nums: [Int] = [1, 2, 3, 4, 5]
    
    var body: some View {
        List {
            ForEach(nums, id: \.self) { num in
                Section {
                    HStack {
                        Text("Num: \(num)")
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .padding()
                    .border(num % 2 == 0 ? Color.red : Color.blue)
                }
            }
        }
        .listStyle(.plain)
    }
}

内容的提问来源于stack exchange，提问作者A Bag