SwiftUI分页TabView滑动时子视图顶部工具栏按钮重复显示问题

问题描述 #

在使用分页样式TabView的SwiftUI应用中，每个全屏页面的导航栏右侧都有自定义操作按钮，但滑动切换页面时，前后页面的按钮会短暂同时显示，延迟约半秒后才仅保留当前页面的按钮。需兼容iOS16，且工具栏按钮需由子视图自身根据模型动态生成。

解决方案 #

方案一：通过选中状态控制工具栏显示时机 #

利用TabView的selection绑定，仅让当前选中的页面渲染工具栏按钮，避免预加载页面的工具栏干扰。

1. 修改父视图ContentView，添加选中状态绑定：

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()
    @State private var selectedIndex = 0 // 添加选中状态
    
    var body: some View {
        NavigationStack {
            TabView(selection: $selectedIndex) { // 绑定selection
                ForEach(viewModel.models) { model in
                    // 传递是否选中的状态给子视图
                    Modelview(model: model, isSelected: selectedIndex == model.position - 1)
                        .tag(model.position - 1) // 设置tag与索引对应
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .always))
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

2. 修改子视图Modelview，根据选中状态控制工具栏显示：

struct Modelview: View {
    var model: Model
    var isSelected: Bool // 接收选中状态
    
    var body: some View {
        Rectangle().fill(model.color)
            .overlay(alignment: .center) {
                Text(model.title).font(.title).foregroundStyle(.black)
                    .padding().background(in: .rect, fillStyle: .init())
            }
            .toolbar {
                // 仅当当前页面选中时才显示按钮
                if isSelected {
                    ToolbarItem(placement: .topBarTrailing) {
                        Button(action: {}, label: { Text(model.shortTitle) })
                    }
                }
            }
    }
}

方案二：自定义导航栏替代系统工具栏 #

如果系统导航栏的延迟问题难以消除，可以完全自定义导航栏，由子视图直接控制顶部按钮的显示，彻底避免预加载导致的重复问题。

修改子视图Modelview，实现自定义导航栏：

struct Modelview: View {
    var model: Model
    
    var body: some View {
        VStack(spacing: 0) {
            // 自定义导航栏
            HStack {
                Spacer()
                Button(action: {}, label: { Text(model.shortTitle) })
                    .padding(.trailing)
            }
            .frame(height: 44)
            .background(Color(.systemBackground))
            .overlay(alignment: .leading) {
                // 保留系统返回按钮（如果需要）
                Button(action: {}, label: { Image(systemName: "chevron.left") })
                    .padding(.leading)
            }
            
            // 页面内容
            Spacer()
            Text(model.title).font(.title).foregroundStyle(.black)
                .padding().background(in: .rect, fillStyle: .init())
            Spacer()
        }
        .background(model.color)
        .ignoresSafeArea()
    }
}

同时修改父视图隐藏系统导航栏：

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()
    
    var body: some View {
        NavigationStack {
            TabView {
                ForEach(viewModel.models) { model in
                    Modelview(model: model)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .always))
            .navigationBarHidden(true) // 隐藏系统导航栏
        }
    }
}

方案说明 #

• 方案一保留了系统导航栏的原生样式和交互逻辑，仅通过状态控制按钮显示时机，代码侵入性小，适合需要保持系统导航栏风格的场景。
• 方案二完全自定义导航栏，彻底摆脱系统工具栏的预加载延迟问题，灵活性更高，适合需要高度定制导航栏样式的场景。

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