如何在 SwiftUI 中将导航栏标题放置在选择器上方？

Question

我正在开发一个 SwiftUI 界面，旨在复制特定的 Apple 风格的导航栏，其中标题位于分段选择器的正上方，并且两个元素共享半透明背景（使用

.thinMaterial

）。这种设计允许在滚动时通过导航栏看到下面视图的内容。

但是，我遇到了一个问题，即使用

.principal

工具栏放置会删除内联标题并将选取器放置在前导和尾随工具栏项目之间，而不是位于所有这些元素下方。

如你所见，苹果在这里做得非常完美。

import SwiftUI

struct TestView: View {
    @State private var selectedView = 0
    let pickerOptions = ["First View", "Second View"]

    var body: some View {
        NavigationView {
            VStack(spacing: 0) {
                Group {
                    if selectedView == 0 {
                        FirstView()
                    } else {
                        SecondView()
                    }
                }
                .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            .navigationBarTitle("Title", displayMode: .inline)
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button(action: {}) {
                        Image(systemName: "ellipsis.circle")
                    }
                }
                ToolbarItem(placement: .principal) {
                    Picker("", selection: $selectedView) {
                        ForEach(pickerOptions.indices, id: \.self) { index in
                            Text(self.pickerOptions[index]).tag(index)
                        }
                    }
                    .pickerStyle(SegmentedPickerStyle())
                }
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: {}) {
                        Image(systemName: "pencil.tip.crop.circle")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(height: 35)
                        Image(systemName: "person.crop.circle")
                            .resizable()
                            .aspectRatio(contentMode: .fit)
                            .frame(height: 35)
                    }
                    .foregroundStyle(.white)
                }
            }
            .background(.thinMaterial)
        }
    }
}

我的目标是调整位置，使选择器位于导航栏中标题的正下方，同时通过半透明的导航栏设备保持通往后面内容的清晰视觉路径。如何在 SwiftUI 中实现这种布局？

我尝试将选择器放置在工具栏的

.principal

部分，将其集成到导航栏中。我的期望是，这将允许选择器出现在导航标题的正下方，仍在导航栏区域内，以创建苹果界面中看到的统一外观。

我的期望：

我希望选择器直接在导航标题下方对齐，形成导航栏的无缝延续。目标是选择器和标题都具有薄的半透明材质设计，允许其后面滚动的内容可见，从而增强用户界面的美感和功能。

发生了什么：

选择器不是在标题下方对齐，而是使用

.principal

放置导致选择器位于前导和尾随工具栏项目之间。这不仅打乱了预期的布局，还删除了导航标题的内嵌显示，这与我的类似于 Apple 设计的无缝集成的目标背道而驰。

Answer 1

在

@available(iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0, *)

您可以使用

safeAreaInset

        .safeAreaInset(edge: .top, content: {
            Picker("", selection: $selectedView) {
                ForEach(pickerOptions.indices, id: \.self) { index in
                    Text(self.pickerOptions[index]).tag(index)
                }
            }
            .pickerStyle(SegmentedPickerStyle())
        })