SwiftUI中如何实现可触发onAppear的自定义TabBar？

问题描述 #

我要给应用实现自定义TabBar，目前看到的方案是用ZStack堆叠页面，通过opacity控制显示选中的页面。但我的代码大量依赖onAppear回调，而切换opacity不会触发这个回调。想知道有没有其他实现方式，既能像ZStack/opacity那样保留每个页面的状态，又能触发onAppear？还是说必须修改现有逻辑，不再依赖onAppear？

以下是示例代码，切换标签时NativeTabView会触发onAppear，但CustomTabView不会：

import SwiftUI

struct ContentView: View {
    var body: some View {
        NativeTabView()
        CustomTabView()
    }
}

#Preview {
    ContentView()
}

struct NativeTabView: View {
    var body: some View {
        TabView {
            Screen(name: "first")
                .tabItem { Text("first") }

            Screen(name: "second")
                .tabItem { Text("second") }
        }
    }
}

struct CustomTabView: View {
    @State var currentTab = "first"
    var body: some View {
        VStack(spacing: 0) {
            content
            tabBar
        }
    }

    var content: some View {
        ZStack {
            Screen(name: "first")
                .opacity(currentTab == "first" ? 1 : 0)

            Screen(name: "second")
                .opacity(currentTab == "second" ? 1 : 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }

    var tabBar: some View {
        HStack {
            Text("first")
                .onTapGesture {
                    currentTab = "first"
                }
                .foregroundStyle(currentTab == "first" ? .blue : .black)
                .frame(maxWidth: .infinity)

            Text("second")
                .foregroundStyle(currentTab == "second" ? .blue : .black)
                .onTapGesture {
                    currentTab = "second"
                }
                .frame(maxWidth: .infinity)
        }
        .frame(height: 44)
        .frame(maxWidth: .infinity)
    }
}

struct Screen: View {
    let name: String
    var body: some View {
        Text(name)
            .onAppear {
                print("onAppear: \(name)")
            }
    }
}

解决方案 #

方法1：使用visibility替代opacity（SwiftUI 3.0+） #

SwiftUI 3.0及以上版本提供了visibility修饰符，设置为.hidden时视图会从布局中移除但保留状态，切换可见性时会触发onAppear和onDisappear回调。

修改CustomTabView的content部分：

var content: some View {
    ZStack {
        Screen(name: "first")
            .visibility(currentTab == "first" ? .visible : .hidden)

        Screen(name: "second")
            .visibility(currentTab == "second" ? .visible : .hidden)
    }
    .frame(maxWidth: .infinity, maxHeight: .infinity)
}

这样切换标签时，对应的Screen会触发onAppear，同时视图状态不会丢失。

方法2：手动触发回调（兼容旧版本） #

如果需要支持SwiftUI 3.0以下版本，可以手动控制回调触发时机。给Screen添加一个绑定的激活状态，监听状态变化模拟onAppear逻辑：

首先修改Screen视图：

struct Screen: View {
    let name: String
    @Binding var isActive: Bool
    
    var body: some View {
        Text(name)
            .onChange(of: isActive) { _, newValue in
                if newValue {
                    print("onAppear: \(name)")
                    // 这里可以放原来onAppear里的逻辑
                }
            }
    }
}

然后修改CustomTabView，管理每个页面的激活状态：

struct CustomTabView: View {
    @State var currentTab = "first"
    @State private var firstScreenActive = true
    @State private var secondScreenActive = false
    
    var body: some View {
        VStack(spacing: 0) {
            content
            tabBar
        }
    }

    var content: some View {
        ZStack {
            Screen(name: "first", isActive: $firstScreenActive)
                .opacity(currentTab == "first" ? 1 : 0)

            Screen(name: "second", isActive: $secondScreenActive)
                .opacity(currentTab == "second" ? 1 : 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }

    var tabBar: some View {
        HStack {
            Text("first")
                .onTapGesture {
                    currentTab = "first"
                    firstScreenActive = true
                    secondScreenActive = false
                }
                .foregroundStyle(currentTab == "first" ? .blue : .black)
                .frame(maxWidth: .infinity)

            Text("second")
                .foregroundStyle(currentTab == "second" ? .blue : .black)
                .onTapGesture {
                    currentTab = "second"
                    firstScreenActive = false
                    secondScreenActive = true
                }
                .frame(maxWidth: .infinity)
        }
        .frame(height: 44)
        .frame(maxWidth: .infinity)
    }
}

方法3：自定义原生TabView样式（推荐） #

如果你的自定义需求不是特别极端，直接自定义原生TabView的样式是最省心的方案——既能保留原生的onAppear行为，又能实现高度定制的UI：

struct CustomStyledTabView: View {
    init() {
        let appearance = UITabBarAppearance()
        // 自定义背景色
        appearance.backgroundColor = .white
        // 自定义选中/未选中的文字样式
        let selectedAttr: [NSAttributedString.Key: Any] = [.foregroundColor: UIColor.blue]
        let normalAttr: [NSAttributedString.Key: Any] = [.foregroundColor: UIColor.black]
        appearance.stackedLayoutAppearance.selected.titleTextAttributes = selectedAttr
        appearance.stackedLayoutAppearance.normal.titleTextAttributes = normalAttr
        // 应用样式
        UITabBar.appearance().standardAppearance = appearance
        UITabBar.appearance().scrollEdgeAppearance = appearance
    }
    
    var body: some View {
        TabView {
            Screen(name: "first")
                .tabItem { Text("first") }

            Screen(name: "second")
                .tabItem { Text("second") }
        }
    }
}

总结 #

• 优先考虑visibility修饰符，代码改动最小，效果符合预期；
• 兼容旧版本时，手动触发回调是可靠的替代方案；
• 尽量避免完全自定义TabBar，利用原生TabView的自定义能力能减少很多潜在问题。

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