SwiftUI 教程

SwiftUI - 主页 SwiftUI - 概览 SwiftUI 与 UIkit

SwiftUI 环境

SwiftUI - 环境设置 SwiftUI - 基本组件 SwiftUI - 构建第一个应用程序

SwiftUI 视图

SwiftUI - 视图 SwiftUI - 自定义文本视图 SwiftUI - 自定义图像视图 SwiftUI - 堆栈

SwiftUI 绘制形状

SwiftUI - 形状 SwiftUI - 绘制线条 SwiftUI - 绘制矩形 SwiftUI - 绘制圆角矩形 SwiftUI - 绘制三角形 SwiftUI - 绘制圆形 SwiftUI - 绘制星形 SwiftUI - 绘制多边形 SwiftUI - 绘制饼图 SwiftUI - 使用内置形状

SwiftUI - 文本

SwiftUI - 文本视图 SwiftUI - 文本输入和输出

SwiftUI - 颜色

SwiftUI - 颜色 SwiftUI - 颜色选择器 SwiftUI - 渐变 SwiftUI - 调整颜色

SwiftUI - 效果

SwiftUI - 效果 SwiftUI - 混合效果 SwiftUI - BLur 效果 SwiftUI - 阴影效果 SwiftUI - 悬停效果

SwiftUI - 动画

SwiftUI - 动画 SwiftUI - 创建动画 SwiftUI - 创建显式动画 SwiftUI - 多个动画 SwiftUI - 过渡 SwiftUI - 不对称过渡 SwiftUI - 自定义过渡

SwiftUI - 图像

SwiftUI - 图像 SwiftUI - 图像作为背景 SwiftUI - 旋转图像 SwiftUI - 媒体

SwiftUI - 视图布局

SwiftUI - 视图布局 SwiftUI - 视图大小 SwiftUI - 视图间距 SwiftUI - 视图填充

SwiftUI - UI 控件

SwiftUI - UI 控件 SwiftUI - 按钮 SwiftUI - 复选框 SwiftUI - 菜单栏 SwiftUI - 工具栏 SwiftUI - 搜索栏 SwiftUI - 文本字段 SwiftUI - 滑块 SwiftUI - 切换 SwiftUI - 选择器 SwiftUI - 菜单

SwiftUI - 列表 &表格

SwiftUI - 列表 SwiftUI - 静态列表 SwiftUI - 动态列表 SwiftUI - 自定义列表 SwiftUI - 表格

SwiftUI - 表单

SwiftUI - 表单 SwiftUI - 在部分中拆分表单

SwiftUI - 事件处理

SwiftUI - 事件处理 SwiftUI - 手势 SwiftUI - 剪贴板 SwiftUI - 拖放 SwiftUI - 焦点 SwiftUI - 警报

SwiftUI - 杂项

SwiftUI - 容器 SwiftUI - 导航 SwiftUI - 通知 SwiftUI - 跨平台 UI SwiftUI - 数据 SwiftUI - 可访问性

SwiftUI - 框架集成

SwiftUI - 框架集成 SwiftUI - 与 UIKit 交互 SwiftUI - 创建 macOS 应用

SwiftUI 有用资源

SwiftUI - 有用资源 SwiftUI - 讨论


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 步: 控件预览。

UI Controls

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

输出

UI Controls

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

输出

UI 控件