Как воспроизвести погоду на WatchOS

Мне удалось приблизиться к интерфейсу приложения погоды, используя комбинацию 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
                }

          }
        })
    }
}

Я смог воспроизвести, как показано ниже, как дочерний элемент навигационного стека.

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 {
                // ...
            }
        }
    }
}