问询WatchOS天气应用视图切换按钮的SwiftUI实现方案

![天气应用切换控件界面1]
![天气应用切换控件界面2]

问题说明 #

Apple Watch天气应用右上角存在一个可在「实况（Conditions）」「气温（Temperature）」「降水（Precipitation）」等视图间切换的控件，询问其SwiftUI实现组件类型，以及是否为自定义UI；同时ChatGPT推荐的SegmentedPickerStyle在watchOS中并不适用。

解答 #

核心结论 #

该控件属于苹果自定义的复合UI组件，并非系统原生的分段选择器（SegmentedPickerStyle确实仅支持iOS/iPadOS，不适用于watchOS）。

开发者实现方案 #

如果需要实现类似功能，可选择以下两种方案：

1. 系统组件替代：Picker + MenuPickerStyle
   符合watchOS交互逻辑，点击后弹出选择菜单：

@State private var selectedView = "Conditions"

Picker("视图切换", selection: $selectedView) {
    Text("实况").tag("Conditions")
    Text("气温").tag("Temperature")
    Text("降水").tag("Precipitation")
}
.pickerStyle(MenuPickerStyle())

2. 自定义按钮组（接近原生外观）
   通过HStack包裹按钮，结合状态变量控制选中样式，还原横向切换的视觉效果：

@State private var selectedView = "Conditions"

HStack(spacing: 8) {
    Button(action: { selectedView = "Conditions" }) {
        Text("实况")
            .foregroundColor(selectedView == "Conditions" ? .white : .gray)
            .padding(.horizontal, 12)
            .padding(.vertical, 4)
            .background(selectedView == "Conditions" ? Color.blue : Color.clear)
            .cornerRadius(8)
    }
    
    Button(action: { selectedView = "Temperature" }) {
        Text("气温")
            .foregroundColor(selectedView == "Temperature" ? .white : .gray)
            .padding(.horizontal, 12)
            .padding(.vertical, 4)
            .background(selectedView == "Temperature" ? Color.blue : Color.clear)
            .cornerRadius(8)
    }
    
    Button(action: { selectedView = "Precipitation" }) {
        Text("降水")
            .foregroundColor(selectedView == "Precipitation" ? .white : .gray)
            .padding(.horizontal, 12)
            .padding(.vertical, 4)
            .background(selectedView == "Precipitation" ? Color.blue : Color.clear)
            .cornerRadius(8)
    }
}

补充说明 #

苹果官方的自定义控件会包含适配watchOS的细腻动效（如按压反馈、过渡动画）和尺寸适配逻辑，若需要高度还原，需在自定义UI基础上补充对应的交互细节处理。

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