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()
}

输出