SwiftUI自定义Radio按钮：如何将自定义设计按钮改造为可用单选控件

问题根因 #

你当前实现的单选功能失效，核心原因是状态所有权下放过深：
每个jwbanButton都独立持有自己的@State isPushed状态，不同按钮实例之间没有任何通信机制，点击任意按钮只会修改自身的状态，完全无法触发其他按钮的状态重置，自然实现不了互斥单选的效果。

改造核心思路 #

采用SwiftUI推荐的状态上移、单向数据流模式：把选中状态的管理权完全交给父视图，所有子按钮不持有任何自有状态，只负责根据父视图传入的参数渲染样式、向外抛出点击事件，从根源上实现单选互斥。

具体实现步骤 #

• 在父视图DisplaySoal中定义全局唯一的选中标识，用来记录当前被选中的选项
• 删除子按钮内部的isPushed状态变量，改造为接收外部传入的配置参数：选项标签、选项文本、是否选中、点击回调
• 点击任意子按钮时，直接修改父视图的选中标识，SwiftUI会自动触发所有绑定了该状态的子视图刷新UI，自动完成选中态切换、其他选项重置的交互

改造后的参考代码 #

struct DisplaySoal: View {
    // 统一的单选状态：记录当前选中的选项标识，nil代表无选中项
    @State private var selectedOption: String? = nil
    
    let answers = [
        ("A", "Makan apa ya yang bagus buat kesehatan dan mencegaj seseorang melakukan kejahatan yang akan menahan rasa sakit"),
        ("B", "示例选项B文本"),
        ("C", "示例选项C文本"),
        ("D", "示例选项D文本")
    ]
    
    var body: some View {
        VStack(){
            ScrollView {
                RoundedRectangle(cornerRadius: 15)
                    .foregroundColor(.gray)
                    .frame(height:500)
                    .padding(.horizontal)
                HStack {
                    Text("Jawaban")
                        .font(.title)
                        .fontWeight(.bold)
                    Spacer()
                }.padding()
                // 遍历渲染所有选项
                ForEach(answers, id: \.0) { option in
                    jwbanButton(
                        optionTag: option.0,
                        optionText: option.1,
                        isSelected: selectedOption == option.0,
                        tapAction: {
                            // 单选核心：点击时直接更新全局选中标识
                            selectedOption = option.0
                        }
                    )
                }
            }
            Spacer()
        }
    }
}

struct jwbanButton: View {
    // 从父视图传入的配置参数，不再持有自有状态
    let optionTag: String
    let optionText: String
    let isSelected: Bool
    let tapAction: () -> Void
    
    var body: some View {
        Button(action: {
            tapAction()
        }) {
            RoundedRectangle(cornerRadius: 15)
                .foregroundColor(isSelected ? .blue : .gray)
                .frame(height:100)
                .overlay(
                    HStack{
                        Group{
                            Text(optionTag)
                                .font(.largeTitle)
                                .fontWeight(.semibold)
                                .padding(.leading)
                            Text(optionText)
                        }
                        .foregroundColor(.white)
                        Spacer()
                    }
                )
                .padding(.horizontal)
        }
    }
}

补充说明 #

• 如果需要支持取消选中（点已经选中的选项就清空选中态），只需要把tapAction的逻辑改成：

tapAction: {
    selectedOption = selectedOption == option.0 ? nil : option.0
}

• 如果需要默认选中某个选项，直接初始化selectedOption时给对应默认值即可，不需要改动其他逻辑
• 如果后续选项是接口动态返回的，只需要替换answers数组的数据源就行，单选逻辑完全不需要调整
• 这套实现完全保留你原有自定义按钮的样式，不需要依赖SwiftUI原生Picker组件，交互逻辑完全符合Radio按钮的通用规范

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