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