iOS14兼容的SwiftUI自定义TabView重构：仿系统TabView实现子视图内容迭代处理

我理解你想要把自定义TabView改成和系统TabView一样的使用方式——直接在闭包里嵌套带各自内容的CustomTabItem，而不是靠传入标签数组来生成。而且还要兼容iOS14，这就需要我们避开一些iOS15+的新API，用基础的SwiftUI特性来实现。下面一步步来重构你的代码：

核心思路 #

要实现系统TabView的使用方式，关键是让CustomTabView能自动收集闭包里每个CustomTabItem的标题和内容，同时管理激活状态的切换。因为iOS14没有可变参数的ViewBuilder新特性，我们用PreferenceKey来传递子视图的信息，这是SwiftUI跨版本通用的方案。

步骤1：重构CustomTabItem #

首先调整CustomTabItem的结构，添加Preference传递信息，同时提供两个初始化方法——一个给用户使用（无需手动传激活状态），一个供CustomTabView内部调用：

public struct CustomTabItem<Content: View>: View {
    @Binding var isActive: Bool
    let title: String
    let content: Content
    
    // 给用户使用的初始化方法：不需要传入isActive，由TabView管理激活状态
    public init(title: String, @ViewBuilder content: @escaping () -> Content) {
        self._isActive = .constant(false) // 临时绑定，内部会被覆盖
        self.title = title
        self.content = content()
    }
    
    // 供CustomTabView内部使用的初始化方法：传入激活状态的绑定
    fileprivate init(isActive: Binding<Bool>, title: String, @ViewBuilder content: @escaping () -> Content) {
        self._isActive = isActive
        self.title = title
        self.content = content()
    }
    
    public var body: some View {
        tabItemUI
            // 传递Tab的标题和内容给父视图
            .preference(
                key: CustomTabView.TabItemPreferenceKey.self,
                value: [CustomTabView.TabContent(title: title, content: AnyView(content))]
            )
    }
    
    // 原来的标签UI逻辑，保持不变
    private var tabItemUI: some View {
        Group {
            if isActive {
                Text(title)
                    .font(.system(size: 14, weight: .bold))
                    .foregroundStyle(Color.blue)
                    .frame(maxWidth: .infinity)
                    .padding(.all, 12)
                    .background(
                        VStack {
                            Spacer()
                            Color.blue.frame(height: 2)
                        }
                        .background(Color.blue.opacity(0.5))
                    )
            } else {
                Text(title)
                    .font(.system(size: 13))
                    .foregroundStyle(Color.black.opacity(0.8))
                    .frame(maxWidth: .infinity)
                    .padding(.all, 12)
                    .background(
                        VStack {
                            Spacer()
                            Color.black.opacity(0.8).frame(height: 1)
                        }
                        .background(Color.white)
                    )
            }
        }
    }
}

步骤2：重构CustomTabView #

这是核心部分，我们要实现：

• 用PreferenceKey收集所有CustomTabItem的信息
• 根据激活索引切换内容视图
• 保留原来的两种变体（filled/scrollable）

public enum CustomTabVariant {
    case filled
    case scrollable
}

public struct CustomTabView: View {
    @Binding private var activeIndex: Int
    private let variant: CustomTabVariant
    private let content: some View
    
    // 存储所有Tab的标题和内容
    @State private var tabContents: [TabContent] = []
    
    // 初始化方法：接受激活状态绑定、变体，以及包含多个CustomTabItem的闭包
    public init(activeIndex: Binding<Int>, variant: CustomTabVariant, @ViewBuilder content: @escaping () -> some View) {
        self._activeIndex = activeIndex
        self.variant = variant
        self.content = content()
    }
    
    public var body: some View {
        VStack(spacing: 0) {
            // 顶部标签栏
            tabBarView
            
            // 显示当前激活Tab的内容
            if !tabContents.isEmpty && activeIndex < tabContents.count {
                tabContents[activeIndex].content
            }
        }
        // 监听子视图传递的Preference，更新tabContents数组
        .onPreferenceChange(TabItemPreferenceKey.self) { newTabContents in
            self.tabContents = newTabContents
            // 处理边界情况：如果激活索引超出Tab数量，重置为0
            if self.activeIndex >= newTabContents.count {
                self.activeIndex = 0
            }
        }
    }
    
    // 根据变体渲染不同的标签栏
    private var tabBarView: some View {
        switch variant {
        case .filled:
            filledTabBar
        case .scrollable:
            scrollableTabBar
        }
    }
    
    // 填充式标签栏：和原来的逻辑一致，遍历tabContents生成按钮
    private var filledTabBar: some View {
        HStack(spacing: 0) {
            ForEach(Array(tabContents.enumerated()), id: \.offset) { index, tab in
                Button {
                    activeIndex = index
                } label: {
                    CustomTabItem(
                        isActive: Binding(
                            get: { activeIndex == index },
                            set: { if $0 { activeIndex = index } }
                        ),
                        title: tab.title,
                        content: { tab.content }
                    )
                }
                .buttonStyle(PlainButtonStyle()) // 移除系统默认按钮样式
            }
        }
    }
    
    // 滚动式标签栏：保留原来的背景和滚动逻辑
    private var scrollableTabBar: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            HStack(spacing: 0) {
                ForEach(Array(tabContents.enumerated()), id: \.offset) { index, tab in
                    Button {
                        activeIndex = index
                    } label: {
                        CustomTabItem(
                            isActive: Binding(
                                get: { activeIndex == index },
                                set: { if $0 { activeIndex = index } }
                            ),
                            title: tab.title,
                            content: { tab.content }
                        )
                    }
                    .buttonStyle(PlainButtonStyle())
                }
            }
        }
        .background(
            VStack {
                Spacer()
                Color.black.opacity(0.8).frame(height: 1)
            }
        )
    }
}

// MARK: - 内部辅助结构
extension CustomTabView {
    // 存储单个Tab的信息
    private struct TabContent: Identifiable {
        let id = UUID()
        let title: String
        let content: AnyView
    }
    
    // PreferenceKey：用于收集所有CustomTabItem的信息
    private struct TabItemPreferenceKey: PreferenceKey {
        static var defaultValue: [TabContent] = []
        
        static func reduce(value: inout [TabContent], nextValue: () -> [TabContent]) {
            value.append(contentsOf: nextValue())
        }
    }
}

步骤3：使用方式（和你想要的完全一致） #

现在你可以像使用系统TabView一样，直接在CustomTabView的闭包里嵌套带各自内容的CustomTabItem：

struct CustomTabPreviewView: View {
    @State private var activeIndex: Int = 0
    
    var body: some View {
        CustomTabView(activeIndex: $activeIndex, variant: .scrollable) {
            CustomTabItem(title: "Tab 1") {
                Text("Active index: 0")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            CustomTabItem(title: "Tab 2") {
                Text("Active index: 1")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            CustomTabItem(title: "Tab 3") {
                Text("Active index: 2")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            CustomTabItem(title: "Tab 4") {
                Text("Active index: 3")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            CustomTabItem(title: "Tab 5") {
                Text("Active index: 4")
                    .font(.largeTitle)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
            }
            // 可以继续添加更多Tab...
        }
    }
}

关键细节说明 #

• PreferenceKey的作用：这是跨版本收集子视图信息的核心，每个CustomTabItem会把自己的title和content通过Preference传递给父视图CustomTabView，父视图统一收集后管理。
• 边界处理：在onPreferenceChange里检查激活索引是否超出Tab数量，避免数组越界崩溃。
• 按钮样式重置：给Button添加PlainButtonStyle()，确保CustomTabItem的UI不会被系统默认按钮样式干扰。
• iOS14兼容性：所有使用的API（PreferenceKey、@ViewBuilder、State、Binding）都是iOS13及以上可用的，完全兼容iOS14。

内容来源于stack exchange