如何创建自定义Picker组件？

嘿，你确实离解决这个问题不远了！你的思路完全正确——要实现选中文本变蓝、未选中变黑的自定义Picker，核心就是要遍历并处理那些带tag的子视图，把选中状态和tag关联起来。我来帮你补上最后那块拼图：

先说说你之前代码的小问题 #

你之前在init里尝试直接处理TupleView但不知道怎么存储，其实完全不需要自己手动处理这个！SwiftUI的@ViewBuilder已经帮我们封装好多视图的逻辑了，我们只需要用_VariadicView.Tree来遍历这些子视图，同时捕获每个视图的tag值，就能轻松实现样式和交互。

完整实现代码 #

先放核心的自定义Picker代码：

import SwiftUI

// 用来捕获视图tag的TraitKey，方便我们获取每个子视图的tag值
struct TagValue<T: Hashable>: _ViewTraitKey {
    static let defaultValue: T? = nil
}

// 扩展View，让系统的tag方法能把值存在我们的TraitKey里
extension View {
    func tag<T: Hashable>(_ tag: T) -> some View {
        self.trait(TagValue<T>.self, tag)
    }
}

// 自定义Picker组件
struct CustomPicker<T: Hashable>: View {
    @Binding var selection: T
    @ViewBuilder private let content: () -> some View

    init(selection: Binding<T>, @ViewBuilder content: @escaping () -> some View) {
        self._selection = selection
        self.content = content
    }

    var body: some View {
        // 用_VariadicView.Tree遍历所有子视图，交给PickerTreeRoot处理
        _VariadicView.Tree(PickerTreeRoot(selection: $selection)) {
            content()
        }
    }
}

// 专门处理子视图的逻辑：设置样式、添加点击交互
struct PickerTreeRoot<T: Hashable>: _VariadicView.TreeRoot {
    @Binding var selection: T

    func body(children: _VariadicView.Children) -> some View {
        // 这里用HStack做横向Picker，改成VStack就能做纵向的
        HStack(spacing: 20) {
            ForEach(children) { child in
                // 获取当前子视图的tag值
                if let tag = child[TagValue<T>.self] {
                    child.content
                        // 根据选中状态设置颜色
                        .foregroundColor(selection == tag ? .blue : .black)
                        // 点击时更新选中状态
                        .onTapGesture {
                            selection = tag
                        }
                } else {
                    // 如果子视图没有加tag，就原样显示
                    child.content
                }
            }
        }
    }
}

然后是使用示例，和你原来的代码几乎一样，直接用就行：

struct ContentView: View {
    @State private var selectionIndex: Int = 2

    var body: some View {
        CustomPicker(selection: $selectionIndex) {
            Text("1").tag(1)
            Text("2").tag(2)
            Text("3").tag(3) // 可以随便加更多选项
        }
        .padding()
    }
}

关键逻辑解释 #

1. _VariadicView.Tree：这个API专门用来处理可变数量的子视图（就是你用@ViewBuilder传进来的多个Text），让我们能挨个遍历每个子视图做自定义处理。
2. TagValue TraitKey：相当于一个“存储容器”，用来捕获每个子视图的tag值，这样我们就能把选中状态selection和视图的tag关联起来。
3. 样式与交互：遍历子视图时，对比selection和当前视图的tag，自动切换文本颜色；同时给每个视图加点击手势，点击时把tag赋值给selection，更新选中状态。

这样你的自定义Picker就完全实现了——点击不同的文本，选中的会变成蓝色，未选中的保持黑色，和你想要的效果一模一样！

备注：内容来源于stack exchange，提问作者Mark