如何在 WatchOS 上复制天气

Question

Apple Watch 上的天气应用程序右上角有一个按钮，可以在条件、温度、降水等之间切换查看模式。这是什么样的 SwiftUI？这是带有按钮的自定义 UI 吗？

ChatGPT 告诉我使用 SegmentedPickerStyle，这在 WatchOS 中不可用

Picker("View", selection: $selectedView) {
    Text("Conditions").tag("Conditions")
    Text("Temperature").tag("Temperature")
    Text("Precipitation").tag("Precipitation")
}.pickerStyle(SegmentedPickerStyle())

Answer 1

我通过使用sheet中Form中呈现的InlinePickerStyle()的组合，成功地接近了天气应用程序界面。

要显示按钮位置，您还需要将 tabView 嵌入到 NavigationStack 中。

这假设您正在以 watchOS 10 作为目标进行构建。

enum Tabs: String, CaseIterable, Identifiable {
    
    case one = "Cold"
    case two = "Warm"
    case three = "Hot"
    
    var id: Self { self }
}

struct ContentView: View {
    @State var selected = Tabs.one
    @State var sheetIsPresented = false
    
    var body: some View {
        NavigationStack {
            TabView(selection: $selected) {
                ForEach(Tabs.allCases) { item in
                    Text("\(item.rawValue) tab")
                }
            }
            .tabViewStyle(.verticalPage)
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        sheetIsPresented = true
                    } label: {
                        Image(systemName: "thermometer.medium")
                            
                    }
                    .foregroundStyle(.white)
                }
            }
        }
        .sheet(isPresented: $sheetIsPresented, content: {
            Form {
                Picker("View", selection: $selected) {
                    ForEach(Tabs.allCases) { item in
                        Text(item.rawValue)
                    }
                }
                .pickerStyle(InlinePickerStyle())
                .onChange(of: selected) {
                    sheetIsPresented = false
                }

          }
        })
    }
}