SwiftUI跨页面持久化Toolbar实现及添加阴影方案咨询

一、优化跨页面的持久化Toolbar #

直接在每个页面复制.toolbar代码确实低效，推荐把带持久化Toolbar的导航容器封装成独立组件，所有页面嵌套其中，只需定义一次Toolbar即可：

1. 封装导航容器组件 #

struct PersistentNavigationView<Content: View>: View {
    let content: Content
    
    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }
    
    var body: some View {
        NavigationStack { // iOS 16+用NavigationStack，iOS 15及以下替换为NavigationView
            content
                .toolbar {
                    ToolbarItem(placement: .principal) {
                        PersistentToolbar()
                    }
                }
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

2. 子页面使用方式 #

所有需要显示该持久化Toolbar的页面，直接放在PersistentNavigationView内部即可，无需再单独添加.toolbar：

// 示例首页
struct HomeView: View {
    var body: some View {
        PersistentNavigationView {
            Text("首页内容")
                .navigationTitle("首页")
        }
    }
}

// 示例个人中心页面
struct ProfileView: View {
    var body: some View {
        Text("个人中心")
            .navigationTitle("个人中心")
    }
}

3. 修正原代码的冗余问题 #

你当前代码里把NavigationLink包裹在Button中是冗余操作，NavigationLink本身具备可点击导航的能力，直接修改PersistentToolbar：

struct PersistentToolbar: View {
    var body: some View {
        HStack {
            Image(systemName: "line.3.horizontal")
                .foregroundColor(.black)
            
            Spacer()
            
            Button(action: {
                print("Go Home")
            }, label: {
                Image("Logo")
                    .resizable()
                    .frame(width: 40, height: 40)
            })
            
            Spacer()
            
            NavigationLink(destination: ProfileView()) {
                Image(systemName: "person.crop.circle")
                    .foregroundColor(.black)
            }
        }
    }
}

二、给Toolbar添加阴影 #

默认Toolbar为透明背景，直接加阴影可能看不到效果，需先设置背景色再添加阴影：

方法1：在PersistentToolbar内部添加背景与阴影 #

修改PersistentToolbar的body部分：

struct PersistentToolbar: View {
    var body: some View {
        HStack {
            // 原HStack内容
        }
        .padding(.horizontal)
        .frame(height: 50)
        .background(Color.white) // 自定义背景色，按需调整
        .shadow(color: .gray.opacity(0.3), radius: 5, x: 0, y: 2) // 阴影参数可自定义
    }
}

方法2：全局给Toolbar区域加阴影（iOS 16+） #

在PersistentNavigationView的toolbar配置后添加以下修饰符，给整个导航栏区域加阴影：

.toolbar {
    ToolbarItem(placement: .principal) {
        PersistentToolbar()
    }
}
.toolbarBackground(Color.white, for: .navigationBar)
.toolbarBackground(.visible, for: .navigationBar)
.navigationBarShadow(color: .gray.opacity(0.3), radius: 5)

若需兼容iOS 15及以下，可通过overlay绘制自定义阴影层实现类似效果。

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