Search code examples
swiftuiwatchos

How to replicate Weather on WatchOS


enter image description here enter image description here

Weather app on apple watch has this button at top right that can change the viewing mode between Conditions, Temperature, Precipitation, etc. What kind of SwiftUI is this? Is this a custom UI with a button?

ChatGPT tells me to use SegmentedPickerStyle, which is not available in WatchOS

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

Solution

  • I was able to replicate as below as a child of navigationStack

    struct Example: View {
        @State private var showSheet = false
        var body: some View {
            // ...
            .toolbar {
                ToolbarItem(placement: .topBarTrailing) {
                    Button {
                        showSheet.toggle()
                    } label: {
                        Image(systemName: "ellipsis")
                    }
                }
            }
            .sheet(isPresented: $showSheet) {
                List {
                    // ...
                }
            }
        }
    }