SwiftUI List设置listRowInsets不生效无法添加单元格间距怎么办？

开发者阿泽

2026-10-3

问题原因

listRowInsets 修饰符的作用对象错误，你需要将它添加到ForEach循环输出的每个行根视图上，而不是行内的子组件上。
你设置的top和bottom参数为0，自然不会产生上下方向的单元格间距，想要行间距需要将这两个值设为正数。
InsetGroupedListStyle 默认自带组内连续单元格样式，要实现卡片式分割还需要配合自定义行背景消除默认的单元格连接样式。

正确实现代码

var body: some View {
    List {
        Section(header: Text("Verses")) {
            ForEach(self.viewModel.verses) { verse in
                NavigationLink(destination: VerseDetailView(verse: verse), label: {
                    VStack(alignment: .leading, spacing: 6) {
                        Text(verse.verse).fontWeight(.medium)
                        Text("No \(verse.verse_number)").foregroundColor(.gray)
                    }
                    .padding(10)
                })
                // 配置行边距，上下值控制单元格之间的间距
                .listRowInsets(.init(top: 8, leading: 16, bottom: 8, trailing: 16))
                // 自定义行背景实现卡片圆角效果
                .listRowBackground(
                    RoundedRectangle(cornerRadius: 12)
                        .fill(Color(UIColor.systemBackground))
                        .padding(.horizontal, 4)
                )
                // 隐藏默认行分隔线
                .listRowSeparator(.hidden)
            }
        }
    }
    .listStyle(InsetGroupedListStyle())
    // 配置列表整体背景突出卡片效果
    .background(Color(UIColor.systemGroupedBackground))
    .scrollContentBackground(.hidden)
}