You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI添加单选按钮:iOS的.radioGroup等API是否已被移除?

SwiftUI中原生单选按钮的支持情况与实现方案

SwiftUI截至iOS 17版本,并未提供radioGroup类型的Picker样式,也没有horizontalRadioGroupLayout()这类API,原生没有直接对应"单选按钮组"的现成组件,但完全可以通过现有API或自定义实现达到相同效果。

方式一:利用Toggle的Radio样式(iOS 14+)

通过将多个Toggle绑定到同一个状态变量,配合.radio样式,即可实现原生风格的单选按钮组:

@State private var selectedFruit: Int = 1

VStack(spacing: 20) {
    Text("Favorite Fruit")
    
    Toggle("Apple", isOn: Binding(
        get: { selectedFruit == 1 },
        set: { if $0 { selectedFruit = 1 } }
    ))
    .toggleStyle(.radio)
    
    Toggle("Orange", isOn: Binding(
        get: { selectedFruit == 2 },
        set: { if $0 { selectedFruit = 2 } }
    ))
    .toggleStyle(.radio)
    
    Toggle("Banana", isOn: Binding(
        get: { selectedFruit == 3 },
        set: { if $0 { selectedFruit = 3 } }
    ))
    .toggleStyle(.radio)
    
    Toggle("Kiwi", isOn: Binding(
        get: { selectedFruit == 4 },
        set: { if $0 { selectedFruit = 4 } }
    ))
    .toggleStyle(.radio)
}

每个Toggle通过绑定判断自身是否被选中,点击时更新共享的状态变量,自动实现单选互斥逻辑。

方式二:自定义单选按钮组件

如果需要更灵活的样式定制,可以封装独立的单选按钮组件:

struct RadioButtonView: View {
    let title: String
    let isSelected: Bool
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: isSelected ? "largecircle.fill.circle" : "circle")
                    .foregroundColor(.accentColor)
                Text(title)
            }
        }
    }
}

// 使用示例
@State private var selectedFruit: Int = 1

VStack(spacing: 20) {
    Text("Favorite Fruit")
    
    RadioButtonView(title: "Apple", isSelected: selectedFruit == 1) {
        selectedFruit = 1
    }
    
    RadioButtonView(title: "Orange", isSelected: selectedFruit == 2) {
        selectedFruit = 2
    }
    
    RadioButtonView(title: "Banana", isSelected: selectedFruit == 3) {
        selectedFruit = 3
    }
    
    RadioButtonView(title: "Kiwi", isSelected: selectedFruit == 4) {
        selectedFruit = 4
    }
}

这种方式可以自由修改图标、文字样式、布局等,适配不同的设计需求。

内容的提问来源于stack exchange,提问作者Edward Hasted

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.21 06:10:18