如何为SwiftUI的DisclosureGroup Chevron添加内边距且不影响组内内容

当然可以实现这个需求，下面提供两种简洁的解决方案：

方法一：自定义Label布局（简单快捷） #

通过给Label的容器添加右侧内边距，同时让组内内容撑满整个宽度，就能实现你要的效果：

DisclosureGroup {
    // 组内内容：设置maxWidth让Divider铺满屏幕
    VStack {
        Text("Row 1")
        Divider()
        Text("Row 2")
        Divider()
    }
    .frame(maxWidth: .infinity)
} label: {
    // 用HStack包裹Label，添加右侧内边距，Chevron会随Label容器右移
    HStack {
        Text("Label")
        Spacer() // 保证Label文本左对齐，Chevron在右侧
    }
    .padding(.trailing, 20) // 调整这个值控制Chevron与屏幕右侧的距离
}

原理说明： #

• 给组内内容添加.frame(maxWidth: .infinity)，强制内容撑满可用宽度，解决Divider无法铺满的问题。
• Label用HStack包裹并添加右侧内边距，Chevron作为Label的一部分会跟着整体右移，不会单独脱离。

方法二：自定义DisclosureGroupStyle（更灵活控制） #

如果需要更精细地控制Chevron的位置，可自定义DisclosureGroup样式，直接操作DisclosureIndicator：

struct ChevronPaddedDisclosureStyle: DisclosureGroupStyle {
    var trailingPadding: CGFloat = 20
    
    func makeBody(configuration: Configuration) -> some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack {
                configuration.label
                Spacer()
                // 直接给Chevron添加右侧内边距
                configuration.disclosureIndicator
                    .padding(.trailing, trailingPadding)
            }
            // 展开时显示内容，同样设置撑满宽度
            if configuration.isExpanded {
                configuration.content
                    .frame(maxWidth: .infinity)
            }
        }
    }
}

// 使用自定义样式
DisclosureGroup {
    VStack {
        Text("Row 1")
        Divider()
        Text("Row 2")
        Divider()
    }
} label: {
    Text("Label")
}
.disclosureGroupStyle(ChevronPaddedDisclosureStyle(trailingPadding: 20))

优势： #

• 可以单独控制Chevron的内边距，不影响Label文本的布局。
• 样式可复用，适合多个DisclosureGroup统一风格的场景。

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