如何为SwiftUI导航栏腾出空间以显示额外视图？

假设黑条上方的所有区域为导航栏，滚动时该导航栏需始终保持在顶部。但当前我的Toolbar已占满全部空间，在principal ToolbarItem内添加VStack这类容器的方式并不合理，还会限制分隔矩形的宽度。请问如何实现需求？

提供的代码片段 #

搜索栏代码 #

/// 临时搜索栏，后续完善功能
ToolbarItem(placement: .principal){
    HStack{
        Image(systemName:"magnifyingglass")
            .resizable()
            .scaledToFit()
            .frame(width: 18, height: 18)
          .foregroundStyle(.shuttleGray)
          .padding(.leading, 5)
          
        
        Text("Search messages")
            .font(.subheadline)
            .foregroundColor(.shuttleGray)
        Spacer()
        Image(systemName:"slider.horizontal.3")
            .resizable()
            .scaledToFit()
            .frame(width: 18, height: 18)
          .foregroundStyle(.shuttleGray)
     
        
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding(8)
    .background(.concrete)
    .cornerRadius(10)
    
}

聚焦/其他标签按钮+分隔线代码 #

VStack{
    /// 聚焦和其他标签的切换视图
    /// 后续可以考虑是否用网格替代当前的Spacer布局方式
    HStack{
        Spacer()
        Button{
            
        } label: {
            Text("Focused")
        }
        .font(.title3)
        .foregroundStyle(.shuttleGray)
        Spacer()
        Button{
            
        } label: {
            Text("Other")
        }
        .font(.title3)
        .foregroundStyle(.shuttleGray)
        Spacer()
    }
    HStack(spacing: 0){
        VStack(spacing:0){
            Rectangle()
                .frame(height: 2)
                .foregroundStyle(.green)
                .padding(.horizontal)
            Rectangle()
                .frame(height: 2)
        }
        Rectangle()
            .frame(height: 2)
    }
}

解决方案 #

不要把标签栏塞进ToolbarItem，直接用自定义顶部导航栏替代系统Toolbar，实现滚动时固定在顶部的效果：

struct MessagesView: View {
    var body: some View {
        NavigationStack {
            ScrollView {
                // 页面主体内容示例
                ForEach(0..<50) { index in
                    Text("消息 \(index)")
                        .padding()
                }
            }
            // 隐藏系统默认Toolbar
            .toolbar(.hidden)
            // 叠加自定义固定导航栏
            .overlay(alignment: .top) {
                VStack(spacing: 16) {
                    // 搜索栏组件
                    HStack{
                        Image(systemName:"magnifyingglass")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 18, height: 18)
                          .foregroundStyle(.shuttleGray)
                          .padding(.leading, 5)
                        
                        Text("搜索消息")
                            .font(.subheadline)
                            .foregroundColor(.shuttleGray)
                        Spacer()
                        Image(systemName:"slider.horizontal.3")
                            .resizable()
                            .scaledToFit()
                            .frame(width: 18, height: 18)
                          .foregroundStyle(.shuttleGray)
                    }
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(8)
                    .background(.concrete)
                    .cornerRadius(10)
                    .padding(.horizontal)
                    
                    // 标签切换+分隔线组件
                    VStack(spacing: 4){
                        HStack{
                            Spacer()
                            Button{
                                // 聚焦标签切换逻辑
                            } label: {
                                Text("聚焦")
                            }
                            .font(.title3)
                            .foregroundStyle(.shuttleGray)
                            Spacer()
                            Button{
                                // 其他标签切换逻辑
                            } label: {
                                Text("其他")
                            }
                            .font(.title3)
                            .foregroundStyle(.shuttleGray)
                            Spacer()
                        }
                        HStack(spacing: 0){
                            VStack(spacing:0){
                                Rectangle()
                                    .frame(height: 2)
                                    .foregroundStyle(.green)
                                    .padding(.horizontal)
                                Rectangle()
                                    .frame(height: 2)
                            }
                            Rectangle()
                                .frame(height: 2)
                        }
                    }
                }
                .background(Color.white) // 与页面背景统一，避免滚动透底
                .padding(.top, UIApplication.shared.windows.first?.safeAreaInsets.top ?? 0) // 适配顶部安全区
            }
            .navigationTitle("消息")
        }
    }
}

核心说明 #

• 用.overlay(alignment: .top)将自定义导航栏固定在页面最顶部，滚动时不会跟随内容移动
• 隐藏系统Toolbar避免布局冲突，同时适配顶部安全区防止被状态栏遮挡
• 自定义导航栏的背景色与页面主体保持一致，保证视觉连贯性
• 标签栏组件不受Toolbar布局限制，分隔矩形可以铺满对应宽度

内容的提问来源于stack exchange，提问作者Tay Baye