SwiftUI - 复选框
复选框是一种 UI 组件,它通过提供一个框来接收用户的输入,用户可以在该框中选择或取消选择、选中或取消选中某个选项。我们可以从给定的列表中同时选择单个或多个复选框。它通常用于表单、设置以及选择条款和条件、权限等。
SwiftUI 不提供内置的复选框视图。因此,我们必须创建一个可以从用户那里获取值的自定义复选框。
在 SwiftUI 中创建复选框
我们可以在切换 UI 控件的帮助下在 SwiftUI 中创建复选框。这是创建复选框最简单、最快捷的方法。在这里,我们创建一个自定义样式,将切换样式设置为复选框。我们还可以在整个项目中多次重复使用此样式。因此,要创建自定义复选框,请按照以下步骤 −
步骤 1:打开项目
在 XCode 中打开新项目或现有项目。
步骤 2:导入 SwiftUI
在项目中导入 SwiftUI。
import SwiftUI
步骤 3:定义状态变量
使用 @State 属性定义状态变量来处理复选框布尔值的变化。如果值被选中,则表示 true,而如果值为 false,则表示复选框未选中。
@State private var toggleValue1 = false
步骤 4:创建 Toggle View
创建一个可轻松应用自定义样式的 Toggle View,将 Toggle View 转换为复选框。
Toggle("TransGender", isOn: $toggleValue3) .toggleStyle(checkBoxStyle()) .padding(.leading, 69)
步骤 5:自定义样式
定义符合 ToggleStyle 的自定义样式。它将 Toggle 视图的外观更改为复选框。
struct checkBoxStyle: ToggleStyle{ func makeBody(configuration: Self.Configuration) -> some View { HStack{ Image(systemName: configuration.isOn ? "checkmark.square" : "square") .resizable() .frame(width:26, height:26) .onTapGesture {configuration.isOn.toggle() } configuration.label } } }
第 6 步:自定义复选框
我们还可以利用预定义的修饰符(如 .background()、.foregroundStyle()、.font()、bold() 等)来设置复选框的外观样式(例如字体颜色、字体样式、填充等)。
Toggle("Female", isOn: $toggleValue2) .toggleStyle(checkBoxStyle()) .padding(.leading, 20) .foregroundStyle(.green)
示例
以下 SwiftUI 程序创建一个复选框。
import SwiftUI struct ContentView: View { @State private var toggleValue1 = false @State private var toggleValue2 = false @State private var toggleValue3 = false var body: some View { VStack { Text("Select your gender:").font(.headline) Toggle("Male", isOn: $toggleValue1) .toggleStyle(checkBoxStyle()) .foregroundStyle(.red) Toggle("Female", isOn: $toggleValue2) .toggleStyle(checkBoxStyle()) .padding(.leading, 20) .foregroundStyle(.green) Toggle("TransGender", isOn: $toggleValue3) .toggleStyle(checkBoxStyle()) .padding(.leading, 69) } } } // 复选框的自定义样式 struct checkBoxStyle: ToggleStyle{ func makeBody(configuration: Self.Configuration) -> some View { HStack{ Image(systemName: configuration.isOn ? "checkmark.square" : "square") .resizable() .frame(width:26, height:26) .onTapGesture {configuration.isOn.toggle() }configuration.label } } } #Preview { ContentView() }
输出
