SwiftUI - UI 控件

SwiftUI 支持各种 UI 控件，例如按钮、文本字段、复选框等。使用这些 UI 控件，用户可以非常轻松地与应用程序交互。它们增强了用户界面的外观和交互性。

Apple 的所有平台都支持它们，例如 iOS、macOS、watchOS、tvOS 和 visionOS。在本章中，我们将讨论 UI 控件以及如何通过示例创建和设置它们的样式。

SwiftUI 中的 UI 控件是什么?

UI 控件是可视化组件，允许用户通过在其中输入一些值或选择一些值来与应用程序交互。每个 UI 控件都会执行一些特定的操作，例如文本字段用于从用户那里获取输入，按钮用于执行给定的操作(例如提交文档等)。

众所周知，SwiftUI 使用声明性语法，因此我们可以轻松创建、修改和设置 UI 控件的样式。此外，控件的外观和行为可以根据其状态自动更新。一些常用的预定义 UI 控件是 −

• 按钮:它创建一个具有给定操作的按钮。

• 滑块:使用此控件，我们可以通过滑动给定的栏来选择一个值。

• 步进器:使用此控件，我们可以执行递增和递减操作。

• 切换:使用此控件，我们可以执行启用和禁用操作。

• 选择器:使用此控件，我们可以从给定的一组互斥值中选择一个值。

• 日期选择器:使用此控件，我们可以从给定的一组日期。

• ColorPicker:使用此控件，我们可以从给定的颜色集中选择一种颜色。

• Menu:使用此控件，我们可以创建一个菜单列表。

• TextField:使用此控件，我们可以创建一个存储用户输入的字段。

• SecureField:使用此控件，我们可以创建一个字段，用户可以在其中输入安全文本，例如密码、用户名、PIN 等。

如何在 SwiftUI 中使用 UI 控件?

众所周知，UI 控件是可重复使用且可交互的视图，有助于为 Apple 的应用程序创建动态 UI 设计。因此，SwiftUI 提供了各种可读可用的控件，我们可以使用它们并借助各种修饰符对其进行自定义。因此，要在设计中使用 UI 控件，请按照以下步骤操作 −

步骤 1: 在 XCode 中打开一个新项目或现有项目。

步骤 2: 在项目中导入 SwiftUI

import SwiftUI

步骤 3: 创建一个名为 ContentView 的 SwiftUI 视图，该视图符合 View 协议。

struct ContentView: View{
   var body: some View{
     // code
   }
}

步骤 4: 要与控件交互，我们必须使用 @state 创建一个状态变量来处理数据的变化。

@State private var myVar = true

步骤 5: 现在我们准备在视图主体内添加预定义控件。例如，在这里，我们添加一个切换按钮。

import SwiftUI

struct ContentView: View {
   @State private var toggleValue1 = false
   @State private var toggleValue2 = false
   
   var body: some View {
     VStack{
       Toggle("Notification", isOn:$toggleValue1)
       Toggle("Sub-Notification", isOn:$toggleValue2)
     }
   }
}
#Preview {
   ContentView()
}

第 6 步: 控件预览。

第 7 步: 我们还可以借助 SwiftUI 提供的各种修饰符自定义控件的外观，例如 .font()、.foregroundStyle()、.padding()、.background() 等。

import SwiftUI

struct ContentView: View {
   @State private var toggleValue1 = false
   @State private var toggleValue2 = false
   
   var body: some View {
     VStack{
       Toggle("Notification", isOn:$toggleValue1)
         .background(.mint)
         .foregroundStyle(.white)
         .font(.title)
       Toggle("Sub-Notification", isOn:$toggleValue2)
         .background(.gray)
         .foregroundStyle(.white)
         .font(.title)
       
     }
   }
}
#Preview {
   ContentView()
}

输出

SwiftUI 中的自定义 UI 控件

除了预定义 UI 控件外，我们还可以创建自己的 UI 控件，并在项目的不同部分重用它们。因此，要创建自定义 UI 控件，我们必须首先定义一个符合 View 协议的结构，该结构包含 UI 控件的定义。现在，我们准备在 ContentView 中使用此 UI 显示在屏幕上。

就像下面的示例所示，这里我们创建一个自定义进度条，显示 Xproject 的进度。在这里，我们可以借助下面给出的滑块增加进度条的值。

示例

以下 SwiftUI 程序创建了一个自定义进度条。

import SwiftUI

struct CustomProgressBar: View {
   var progress: Double
   
   var body: some View {
     ZStack {
       
       // Background Circle
       // Represents full progress
       Circle().stroke(lineWidth: 15)
         .opacity(0.2)
         .foregroundColor(.pink)
       
       // Foreground Circle 
       // Represent Dynamic progress
       Circle()
         .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
         .stroke(style: StrokeStyle(lineWidth: 15, lineCap: .round, lineJoin: .round))
         .foregroundColor(.pink)
         .rotationEffect(Angle(degrees: 270.0))
         .animation(.linear, value: progress)

       // 以百分比显示进度
       Text(String(format: "%.0f %%", min(self.progress, 1.0) * 100.0))
         .font(.title)
     }
   }
}
struct ContentView: View {
   @State private var result: Double = 0.5

   var body: some View {
     VStack {
       Text("Check the Progress of the XPoject")
         .font(.title)
         .bold()
       CustomProgressBar(progress: result)
         .frame(width: 150, height: 150)
         .padding()

       Slider(value: $result, in: 0...1)
     }
   }
}
#Preview {
   ContentView()
}

输出