SwiftUI ColorPicker空标签导致水平对齐问题

问题根源 #

原生SwiftUI ColorPicker 传入空字符串""作为标签时，系统仍会为标签区域保留默认布局空间，这就是你在Debug View Hierarchy中看到的冗余空间，最终导致HStack内的ColorPicker无法正确居中对齐。

直接解决方案：用EmptyView()替代空字符串标签 #

将ColorPicker的标签参数从空字符串替换为EmptyView()，标签区域不会占据任何空间，同时满足无标签的需求：

修改后的customColorPicker代码：

private func customColorPicker(index: Int) -> some View {
    ColorPicker(selection: Binding(
        get: {
            colorPalettes[3][index]
        },
        set: { newColor in
            
            colorPalettes[3][index] = newColor
            
            if index == 0 {
                widgetCustomColorPaletteFirstIndex = newColor.hex
            } else if index == 1 {
                widgetCustomColorPaletteSecondIndex = newColor.hex
            } else if index == 2 {
                widgetCustomColorPaletteThirdIndex = newColor.hex
            }
            sharedVars.colorPaletteIndex = 3
            widgetColorPaletteIndex = 3
            WidgetCenter.shared.reloadTimelines(ofKind: "QuoteDropletWidget")
        }
    ), supportsOpacity: true) {
        EmptyView() // 用EmptyView替代空字符串
    }
    .frame(width: 60, height: 60)
    .cornerRadius(8)
    .onChange(of: colorPalettes) { _ in
        WidgetCenter.shared.reloadTimelines(ofKind: "QuoteDropletWidget")
    }
}

可选方案：使用labelsHidden()修饰符 #

如果倾向于保留空字符串标签的写法，可给ColorPicker添加labelsHidden()修饰符，强制隐藏标签区域的所有空间：

ColorPicker("", selection: ..., supportsOpacity: true)
    .labelsHidden() // 隐藏标签区域
    .frame(width: 60, height: 60)
    // 其他修饰符...

验证效果 #

修改后重新运行，通过Debug View Hierarchy可看到冗余空间已消除，HStack内的ColorPicker会按预期居中对齐。

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