如何实现带文字+下方图标/图片的Segmented Picker？

问题根源 #

SwiftUI的SegmentedPickerStyle默认会强制选项内容横向排列，直接嵌套VStack会被系统布局约束覆盖；而默认Label的图标会被分段选择器自动隐藏，仅保留文字，所以需要自定义布局逻辑来实现垂直排列的需求。

解决方案 #

通过自定义LabelStyle让Label的文字与图标垂直排列，同时确保视图布局不受分段选择器默认约束干扰，具体实现如下：

完整可运行代码 #

struct ContentView: View {
    var body: some View {
        TestPicker()
    }
}

struct TestPicker: View {
    @State var selection = "fire"
    
    var body: some View {
        Picker("type", selection: $selection) {
            Label("fire", systemImage: "flame")
                .tag("fire")
                .labelStyle(VerticalLabelStyle())
            
            Label("water", systemImage: "water.waves")
                .tag("water")
                .labelStyle(VerticalLabelStyle())
        }
        .pickerStyle(.segmented)
        .frame(width: 222, height: 80) // 适当增加高度适配垂直布局
    }
}

// 自定义垂直排列的Label样式
struct VerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack(spacing: 4) {
            configuration.title
            configuration.icon
                .font(.system(size: 14)) // 按需调整图标大小
        }
        .fixedSize() // 固定尺寸避免被横向布局强制拉伸
    }
}

关键细节说明 #

1. 自定义LabelStyle：VerticalLabelStyle将Label的标题（文字）和图标按垂直方向排列，通过spacing控制两者间距，fixedSize保证视图不会被分段选择器的默认布局挤压变形。
2. 调整Picker高度：垂直布局需要更多垂直空间，适当调高frame的高度可以让文字和图标完整显示。
3. VStack替代方案：如果不想使用Label，直接用VStack也能实现，只需添加.fixedSize()来锁定布局：

VStack(spacing: 4) {
    Text("fire")
        .font(.caption)
    Image(systemName: "flame")
        .font(.system(size: 14))
}
.tag("fire")
.fixedSize()

效果验证 #

上述代码运行后，分段选择器的每个选项会呈现文字在上、图标在下的垂直布局，完全满足需求。

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