如何在 SwiftUI 中的导航标题正下方嵌入选择器？

Question

我正在开发一个 SwiftUI 项目，我需要在导航栏内的导航标题和按钮正下方放置一个分段选择器。我的目标是实现类似于苹果在日历应用程序中展示的布局，其中选择器无缝集成在导航栏的标题和操作按钮下方，但仍然共享导航栏的背景。

这是我迄今为止尝试过的：

使用 ToolbarItem 和 .principal 放置：此方法允许我将选取器放置在导航栏的中心，但不允许我将其放置在导航按钮（取消、添加）下方。

使用带有选择器和表单的自定义 VStack：虽然这确实将选择器放在标题下方，但它不会将其集成到导航栏中。

我正在寻找一种将选择器放置在导航栏标题和按钮下方但仍在导航栏的视觉上下文内的方法。是否有 SwiftUI 方法或解决方法来实现此布局？ 我想要达到的目标

Answer 1

您在示例图像中显示的内容看起来更像是选择器只是工作表主体的一部分，不一定嵌入在导航工具栏中，并且工作表具有材质背景。

这可以大大简化事情。

这是一个带有材质背景的工作表中的选择器的简单工作示例，其中选择器位于导航工具栏的正下方，并且不随滚动内容移动：

import SwiftUI

struct PickerInSheet: View {
    
    @State private var showSheet = false
    @State private var pickerSelection = "event"
    @State private var selectedDate = Date()
    
    var body: some View {
        ZStack {
            Color.orange
                .ignoresSafeArea()
            
            Button {
                showSheet = true
            } label: {
                Text("Open sheet")
            }
            .tint(.white)
        }
        .sheet(isPresented: $showSheet){
            NavigationStack {
                VStack {
                    Picker("", selection: $pickerSelection) {
                        Text("Event").tag("event")
                        Text("Reminder").tag("reminder")
                    }
                    .pickerStyle(.segmented)
                }
                ScrollView {
                    Text("This is some scrollview content")
                    .foregroundStyle(.secondary)
                    
                    DatePicker("Select date", selection: $selectedDate)
                        .datePickerStyle(.graphical)
                }
                .padding(.vertical)
                .navigationTitle("New")
                .toolbarTitleDisplayMode(.inline)
                .toolbar {
                    ToolbarItem(placement: .topBarLeading){
                        Button("Cancel"){
                            showSheet = false
                        }
                    }
                    
                    ToolbarItem {
                        Button("Add"){
                            //action...
                        }
                    }
                }
            }
            .tint(.red)
            .padding()
            .presentationBackground(.thinMaterial)
        }
    }
}

#Preview {
    PickerInSheet()
        .preferredColorScheme(.dark)
}