SwiftUI中如何让TabView的多个标签页共享同一个视图

一、封装通用访问限制视图，提升代码可读性 #

重复的Group和条件判断会让代码冗余，我们可以封装一个通用的AuthorizedContent视图，将授权逻辑统一处理，每个标签页只需传入对应内容即可：

// 通用授权容器视图
struct AuthorizedContent<Content: View>: View {
    let isAuthorized: Bool
    let authorizedContent: () -> Content
    let blockedView: BlockView

    var body: some View {
        Group {
            if isAuthorized {
                authorizedContent()
            } else {
                blockedView
            }
        }
    }
}

// 优化后的TabView实现
struct Test: View {
    @State private var isAuthorised = false

    var body: some View {
        TabView {
            AuthorizedContent(
                isAuthorized: isAuthorised,
                authorizedContent: { Text("Content 1") },
                blockedView: BlockView()
            )
            .tabItem { Text("Tab 1") }

            AuthorizedContent(
                isAuthorized: isAuthorised,
                authorizedContent: { Text("Content 2") },
                blockedView: BlockView()
            )
            .tabItem { Text("Tab 2") }
        }
    }
}

如果需要支持自定义未授权视图，也可以将blockedView改为闭包类型，提升灵活性：

struct AuthorizedContent<Content: View, Block: View>: View {
    let isAuthorized: Bool
    let authorizedContent: () -> Content
    let blockedContent: () -> Block

    var body: some View {
        Group {
            if isAuthorized {
                authorizedContent()
            } else {
                blockedContent()
            }
        }
    }
}

// 使用示例
AuthorizedContent(
    isAuthorized: isAuthorised,
    authorizedContent: { Text("Content 1") },
    blockedContent: { BlockView() }
)

二、实现BlockView的状态共享与视图复用 #

如果BlockView带有内部状态（比如输入框内容、交互状态），默认每个标签页的BlockView都是独立实例，会重复占用内存且状态不共享，可通过以下两种方式解决：

1. 提取状态到共享视图模型 #

将BlockView的状态迁移到一个ObservableObject类中，父视图持有该模型并传递给所有BlockView实例，这样所有标签页的BlockView共享同一状态：

// 共享的BlockView状态模型
class BlockState: ObservableObject {
    @Published var userInput = ""
    @Published var isButtonTapped = false
}

// 修改后的BlockView
struct BlockView: View {
    @ObservedObject var state: BlockState

    var body: some View {
        VStack {
            TextField("输入内容", text: $state.userInput)
            Button("点击") {
                state.isButtonTapped.toggle()
            }
            Text(state.isButtonTapped ? "已点击" : "未点击")
        }
    }
}

// 父视图中使用共享模型
struct Test: View {
    @State private var isAuthorised = false
    @StateObject private var blockState = BlockState() // 全局共享的状态

    var body: some View {
        TabView {
            AuthorizedContent(
                isAuthorized: isAuthorised,
                authorizedContent: { Text("Content 1") },
                blockedView: BlockView(state: blockState)
            )
            .tabItem { Text("Tab 1") }

            AuthorizedContent(
                isAuthorized: isAuthorised,
                authorizedContent: { Text("Content 2") },
                blockedView: BlockView(state: blockState)
            )
            .tabItem { Text("Tab 2") }
        }
    }
}

2. 复用同一个BlockView实例 #

如果希望整个TabView中只存在一个BlockView实例（切换标签时不重建），可以通过ZStack叠加视图并控制显示/隐藏的方式实现，同时保留状态：

struct AuthorizedContent<Content: View>: View {
    let isAuthorized: Bool
    let authorizedContent: () -> Content
    @StateObject private var blockState = BlockState()

    var body: some View {
        ZStack {
            // 始终加载授权内容，授权时显示
            authorizedContent()
                .opacity(isAuthorized ? 1 : 0)
                .allowsHitTesting(isAuthorized)

            // 始终加载BlockView，未授权时显示
            BlockView(state: blockState)
                .opacity(isAuthorized ? 0 : 1)
                .allowsHitTesting(!isAuthorized)
        }
    }
}

这种方式下，BlockView只会被创建一次，切换标签或授权状态变化时，只是显示/隐藏，状态会完全保留，同时节省内存开销。

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