如何在SwiftUI自定义视图中读取子元素的修饰器内容？

1. 定义子项数据结构体 #

先创建结构体存储自定义修饰器传递的内容，包含按钮标签和对应子视图：

struct CustomItemData: Identifiable {
    let id = UUID()
    let label: AnyView
    let content: AnyView
}

2. 用PreferenceKey收集子视图数据 #

借助SwiftUI的PreferenceKey机制，向上传递所有子视图的修饰器数据：

struct CustomViewPreferenceKey: PreferenceKey {
    static var defaultValue: [CustomItemData] = []
    
    static func reduce(value: inout [CustomItemData], nextValue: () -> [CustomItemData]) {
        value.append(contentsOf: nextValue())
    }
}

3. 自定义.inCustomView修饰器 #

实现修饰器，将子视图和标签数据通过PreferenceKey传递给父视图：

extension View {
    func inCustomView<Label: View>(@ViewBuilder label: () -> Label) -> some View {
        self
            .preference(
                key: CustomViewPreferenceKey.self,
                value: [CustomItemData(
                    label: AnyView(label()),
                    content: AnyView(self)
                )]
            )
    }
}

4. 实现自定义父视图CustomView #

父视图读取收集到的数据，渲染按钮栏并切换显示子视图：

struct CustomView: View {
    @State private var customItems: [CustomItemData] = []
    @State private var selectedItemId: UUID?
    
    var body: some View {
        VStack(spacing: 0) {
            // 底部按钮栏（类似TabBar）
            HStack {
                ForEach(customItems) { item in
                    Button {
                        selectedItemId = item.id
                    } label: {
                        item.label
                            .foregroundColor(selectedItemId == item.id ? .blue : .gray)
                            .padding(.vertical, 8)
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .background(Color(.systemBackground))
            .border(.gray.opacity(0.2), edge: .top)
            
            // 主内容区域
            ZStack {
                ForEach(customItems) { item in
                    item.content
                        .opacity(selectedItemId == item.id ? 1 : 0)
                        .ignoresSafeArea()
                }
            }
        }
        .onPreferenceChange(CustomViewPreferenceKey.self) { newItems in
            customItems = newItems
            // 初始化选中第一个，或保留有效选中状态
            if selectedItemId == nil || !customItems.contains(where: { $0.id == selectedItemId }) {
                selectedItemId = customItems.first?.id
            }
        }
    }
}

5. 使用示例 #

像TabView一样调用自定义视图和修饰器：

struct CustomViewDemo: View {
    var body: some View {
        CustomView {
            Text("首页内容")
                .inCustomView {
                    Label("首页", systemImage: "house")
                }
            
            Text("我的内容")
                .inCustomView {
                    Label("我的", systemImage: "person.circle")
                }
            
            Text("设置内容")
                .inCustomView {
                    Label("设置", systemImage: "gear")
                }
        }
    }
}

核心逻辑说明 #

• PreferenceKey：实现视图层级内的数据向上传递，子视图通过.preference()发送数据，父视图通过.onPreferenceChange()接收处理。
• 修饰器封装：inCustomView将子视图和标签打包成统一数据结构，简化调用方式。
• 父视图渲染：根据收集的子项数据生成按钮栏，通过选中状态切换对应子视图的显示，和TabView逻辑一致。

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