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
相关产品推荐
相关产品推荐

