安全域视图
SwiftUI还内置了创建安全文本框的视图。这一视图会把用户输入的字符替换成点以及隐藏敏感信息,比如密码。
- SecureField(String, text: Binding):该初始化方法创建一个安全输入框。第一个参数定义占位文本,
text
参数为存储用户插入值的绑定属性。
实现方式与TextField
视图相同,我们也可以应用相同的修饰符,如下所示。
示例6-29:使用安全文本框
struct ContentView: View {
@State private var pass: String = ""
var body: some View {
VStack(spacing: 15) {
Text(pass)
.padding()
SecureField("Insert Password", text: $pass)
.textFieldStyle(.roundedBorder)
Spacer()
}.padding()
}
}
SecureField
视图和TextField
视图外观一样。唯一的差别是其中的字符是隐藏的。
图6-15:安全文本框
✍️跟我一起做:创建一个多平台项目。使用示例6-29中的代码更新ContentView
视图。在输入框中插入字符。会看到字符被替换成为小黑点,如图6-15所示。
文本编辑器视图
SwiftUI还自带一个称为TextEditor
的视图让用户可以插入多行文本。以下是该视图的初始化方法。
- TextEditor(text: Binding):此初始化方法创建一个文本编辑器。
text
参数是存储用户所插入文本的绑定属性。
该视图可以接收前面用于格式化文本的TextField
和Text
视图的一些修饰符。例如,我们可以设置视图中文本的对齐、行间距以及是否做错误检查。
示例6-30:实现一个文本编辑器
struct ContentView: View {
@State private var text: String = ""
var body: some View {
TextEditor(text: $text)
.multilineTextAlignment(.leading)
.lineSpacing(10)
.autocorrectionDisabled(true)
.padding(8)
}
}
图6-16:文本编辑器
开关视图
Toggle
视图创建一个在两种状态间切换的控件。默认在移动设备上显示为对用户友好的开关,在Mac上显示为复选框。该视图包含如下初始化方法。
- Toggle(String, isOn: Binding):该初始化方法创建一个
Toggle
视图。第一个参数定义标签,isOn
参数为存储当前状态的绑定属性。本视图还自带有一个由闭包返回视图的标签(Toggle(isOn: Binding, label: Closure))。
该视图要求绑定属性存储当前值。在下例中,我们提供了一个@State
属性并使用属性值来选取适当的标签。
示例6-31:实现一个开关
struct ContentView: View {
@State private var currentState: Bool = true
var body: some View {
VStack {
Toggle(isOn: $currentState, label: {
Text(currentState ? "On" : "Off")
})
Spacer()
}.padding()
}
}
示例6-31中的代码使用三元运算符来检测currentState
属性的值并显示相应的文本(On或Off)。默认我们设置属性值为true
,因此开关处于打开状态并在屏幕上显示On标签,但如果点击开关,就会关闭,视图更新为显示Off标签。
图6-17:打开和关闭开关
✍️跟我一起做:创建一个多平台项目。使用示例6-31中的代码更新ContentView
视图。点击打开或关闭开关。使用这个项目测试下面的例子。
赋值给label
参数的闭包可以包含另外一个定义副标题的视图,如下例所示。
示例6-32:添加副标题
struct ContentView: View {
@State private var currentState: Bool = true
var body: some View {
VStack {
Toggle(isOn: $currentState, label: {
Text(currentState ? "On" : "Off")
Text("Enable or Disable")
})
Spacer()
}.padding()
}
}
图6-18:带标题和副标题的开关
Toggle
视图创建了一个包含标题和控件中间为弹性空间的横向布局,结果就是整个视图占满容器的横向空间,标签和控件位于两端。如果希望对视图的位置和尺寸做精确控制,可以应用此前介绍过的fixedSize
修饰符来降低视图的尺寸,或使用如下修饰符隐藏标签。
- labelsHidden():此修饰符隐藏赋值给控件的标签。
这一修饰符适用于多款控件,但对开关尤为有用。下例展示了如何实现它来为控件定义一个自定义标签。
示例6-33:为Toggle
视图定义一个自定义标签
struct ContentView: View {
@State private var currentState: Bool = true
var body: some View {
HStack {
Toggle("", isOn: $currentState)
.labelsHidden()
Text(currentState ? "On" : "Off")
.padding()
.background(Color(currentState ? .yellow : .gray))
}.padding()
}
}
视图现在为控件的大小并在屏幕中心显示。标签不再显示 ,因此我们将其声明为空字符串,但在当前值的侧边包含一个Text
视图。
图6-19:自定义大小以及开关的标签
类似Button
视图,Toggle
视图也实现了修饰符用于定义控件的样式。
- toggleStyle(ToggleStyle):这一修饰符定义开关的样式。参数是一个遵循
ToggleStyle
协议的结构体。为创建标准的结构体,框架包含了automatic
、button
、checkbox
和switch
这些属性。
默认值为automatic
,表示控件的样式由系统选择。如果希望保持同一种样式,可以赋值switch
或checkbox
(仅能用于Mac)。这些值用于指定标准样式,但框架还内置了button
值来创建完全不同类型的控件。在将这一样式赋值给视图时,系统显示一个开关按钮来表示开和关的状态。在按钮处于开的状态时,高亮显示,否则显示 为标准按钮。
示例6-34:实现一个开关按钮
struct ContentView: View {
@State private var currentState: Bool = true
var body: some View {
HStack {
Toggle(isOn: $currentState, label: {
Label("Send", systemImage: "mail")
})
.toggleStyle(.button)
}.padding()
}
}
图6-20:切换按钮为开关状态
框架提供的样式是有限的,但我们可以自行创建。只需要定义一个遵循ToggleStyle
协议的结构体。该协议要求结构体实现如下方法。
- makeBody(configuration: Configuration):该方法定义并返回一个替换开关主体的视图。
configuration
参数是一个Configuration
类型的值,包含控件相关信息。
这个方法接收一个类型为Configuration
的值,是ToggleStyleConfiguration
的类型别名,包含如下属性来返回控件相关的信息。
- isOn:该属性返回一个表示开关处于开或关状态的布尔值。
- label:该属性返回定义开关标签的视图。
isOn
是一个绑定属性,创建与视图的双向绑定,因此我们可以读取并修改其值来激活或停用控件。在下例中,我们创建了一个类似复选框的Toggle
视图。点击控件时,图形变换颜色来表示当前的状态(灰色为停用,绿色为激活)。
示例6-35:定义一个自定义Toggle
视图
struct MyStyle: ToggleStyle {
func makeBody(configuration: Configuration) -> some View {
HStack(alignment: .center) {
configuration.label
Spacer()
Image(systemName: "checkmark.rectangle.fill")
.font(.largeTitle)
.foregroundColor(configuration.isOn ? Color.green : Color.gray)
.onTapGesture {
configuration.$isOn.wrappedValue.toggle()
}
}
}
}
struct ContentView: View {
@State private var currentState: Bool = false
var body: some View {
VStack {
HStack {
Toggle("Enabled", isOn: $currentState)
.toggleStyle(MyStyle())
Spacer()
}.padding()
}
}
}
在自定义Toggle
视图前必须要考虑几件事。首先,Configuration
结构体的label
属性包含一个控件当前标签的视图副本,因此如果想要保留这个标签,必须在新的内容中包含这个值。第二,Toggle
视图使用HStack
视图和标签与控件间的Spacer
视图来设计。如果想要保留标准设计,必须保持这种布局。第三,我们负责响应用户的交互以及更新控件的状态,因此必须检测手势并在用户执行手势时通过修改isOn
属性的值来变更控件状态。
在示例6-35中,我们定义了一个结构体MyStyle
并实现了所要求的makeBody()
方法来为Toggle
视图提供新设计。为保留标准样式,我们使用HStack
视图来包装视图并使用Spacer
视图来分隔标签与控件。首先我们读取label
属性的值来添加当前标签,然后声明Spacer
视图,最后声明一个Image
视图来展示外观像复选框的SF图标。为将Image
视图转换为控件,我们使用font()
修饰符定义其大小,应用foregroundColor()
修饰符来根据isOn
属性的当前值来修改图标的颜色,最后,使用onTapGesture()
修饰符监测用户何时点击Image
视图。我们会在第12章中学习更多有关手势修饰符的知识。现在,只需要知道这一修饰符在每次用户点击视图时执行一个闭包。在这个闭包中,我们访问isOn
属性的绑定值并通过对wrappedValue
属性中的布尔值应用toggle()
修饰符切换值。(本例中,绑定值的setter是私有的,因此通过wrappedValue
属性访问它,本章前面做过讲解。)这会修改该属性的当前值,进而改变控件的状态,将其打开及关闭。
图6-21:Toggle
视图的自定义样式
其它相关内容请见虚拟现实(VR)/增强现实(AR)&visionOS开发学习笔记
标签:控件,用户界面,修饰符,视图,Toggle,Part,SwiftUI,currentState,View From: https://blog.51cto.com/alanhou/9258563