SwiftUI - 焦点
焦点是 SwiftUI 中的一个特殊功能，它标识哪个元素将接收下一个输入。或者我们可以说焦点用于控制和管理哪个 UI 组件将接收用户输入或注意。
它创造了无缝的用户体验，特别是在处理具有多个按钮或文本字段的表单时，键盘管理用于控制键盘何时出现或消失，可访问性以确保用户可以正确导航界面等。它最初是在 iOS 15 中引入的，旨在提供一种结构化的方式来管理应用中存在的不同 UI 组件的焦点状态。
要在应用中使用焦点，我们必须使用预定义的修饰符和属性包装器−
@FocusState 属性包装器
focused 修饰符
SwiftUI 中的 @FocusState 属性包装器
@FocusState 是一个功能强大的属性包装器，用于跟踪哪个视图正在接收焦点。它可以是布尔值来控制单个字段的跟踪，也可以是枚举来控制多个字段的跟踪。它通常与 focused() 修饰符结合使用，以描述获得当前焦点的视图的位置和外观。因此，每当视图获得焦点时，包装在 @FocusState 属性中的值将设置为 true 或给定的原型值，而当焦点离开视图时，它将被设置为 false。
语法
以下是语法−
@FocusState private var value: Bool
示例
以下 SwiftUI 程序用于将焦点设置在文本字段上。
import SwiftUI
struct ContentView: View {
@State private var name: String = ""
// 给定文本字段的焦点状态
@FocusState private var isFocused: Bool
var body: some View {
VStack{
TextField("Enter your name", text: $name)
.padding()
.background(.teal.opacity(0.4))
.cornerRadius(8)
// 将焦点附加到文本字段
.focused($isFocused)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button("Focus on Field") {
isFocused = true
}
Button("Dismiss Focus") {
isFocused = false
}
}.padding()
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的 Focused 修饰符
.focused() 修饰符用于将 UI 组件或任何其他元素的焦点状态与给定的状态值(即 @FocusState 属性)绑定在一起。它允许我们控制和管理给定元素之间的焦点。或者我们可以说，只要 @FocusState 属性的值设置为 true，此修饰符就会将焦点设置在指定元素上。
语法
以下是语法−
func focused(_ condition: FocusStateBinding)
参数
它只接受一个参数，即焦点绑定的状态。默认情况下，SwiftUI 会自动解除焦点。当焦点移动到视图时，绑定值设置为 true，而当焦点离开视图时，绑定值设置为 false。
示例
以下 SwiftUI 程序用于调整焦点。
import SwiftUI
struct ContentView: View {
@State private var name: String = ""
// 给定文本字段的焦点状态
@FocusState private var isFocused: Bool
var body: some View {
VStack{
TextField("Enter your name", text: $name)
.padding()
.background(.teal.opacity(0.4))
.cornerRadius(8)
// 将焦点附加到文本字段
.focused($isFocused)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button("Focus on Field") {
isFocused = true
}
Button("Dismiss Focus") {
isFocused = false
}
}
.padding()
}
}
#Preview {
ContentView()
}
输出
SwiftUI 中的多个焦点元素
在 SwiftUI 中，我们可以借助枚举将焦点设置在多个输入字段或元素上。在这里，焦点会根据用户的操作进行调整。当我们使用登录页面、选择多个产品或任何需要多个输入字段的表单时，它很有用。
示例
以下 SwiftUI 程序用于调整给定表单中的多个焦点。
import SwiftUI
struct ContentView: View {
@State private var name: String = ""
@State private var city: String = ""
@State private var branch: String = ""
// 焦点状态来管理多个焦点
@FocusState private var focused: myFields?
enum myFields {
case name
case city
case branch
}
var body: some View {
VStack{
TextField("Enter your name", text: $name)
.focused($focused, equals: .name)
.padding()
.background(Color(.systemGray6))
.cornerRadius(8)
TextField("Enter you city", text: $city)
.focused($focused, equals: .city)
.padding()
.background(Color(.systemGray6))
.cornerRadius(8)
TextField("Enter you branch", text: $branch)
.focused($focused, equals: .branch)
.padding()
.background(Color(.systemGray6))
.cornerRadius(8)
HStack {
Button("Move Focus to next") {
// 将焦点移至下一个字段
switch focused{
case .name:
focused = .city
case .city:
focused = .branch
case .branch:
focused = nil
default:
break
}
}.padding()
.background(.blue)
.foregroundStyle(.white)
.cornerRadius(8)
// Submitting form
Button("Submit") {
focused = nil
}
.padding()
.background(.yellow)
.foregroundStyle(.white)
.cornerRadius(8)
}
}
}
}
#Preview {
ContentView()
}
输出
