SwiftUI中如何修改DisclosureGroup头部背景色并铺满列表边缘

你遇到的问题是因为List的plain样式默认给每行设置了内边距（listRowInsets），导致DisclosureGroup的背景无法铺满左右边缘。以下是两种实用的解决方式：

方法一：消除行内边距并调整padding位置 #

把List行的内边距设为0，同时将原本加在DisclosureGroup上的padding移到label内部，既保证背景铺满，又能保留内容的内边距：

struct ContentView: View {
    var body: some View {
        List {
            DisclosureGroup {
                Text("item 1")
                Text("item 2")
            } label: {
                HStack {
                    Image(systemName: "heart")
                    Text("Header")
                }
                .padding() // 内边距移到label内部
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0)) // 清除行内边距
            .background(Color.blue)
        }
        .listStyle(.plain)
        .background(Color.red)
    }
}

方法二：使用listRowBackground设置行背景 #

List提供了专门的listRowBackground修饰符来设置行背景，配合消除内边距，效果更稳定：

struct ContentView: View {
    var body: some View {
        List {
            DisclosureGroup {
                Text("item 1")
                Text("item 2")
            } label: {
                HStack {
                    Image(systemName: "heart")
                    Text("Header")
                }
                .padding()
            }
            .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
            .listRowBackground(Color.blue) // 用listRowBackground替代普通background
        }
        .listStyle(.plain)
        .background(Color.red)
    }
}

这两种方法都能让DisclosureGroup的蓝色头部铺满列表的左右边缘，消除白色空隙。

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