HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

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 环境 SwiftUI 构建第一个应用程序 ❯

SwiftUI - 基本组件

SwiftUI 是 Apple 的框架，旨在为所有 Apple 平台(包括 iOS、macOS、watchOS、tvOs、visionOS 等)创建简单和复杂的用户界面，代码更少，性能更好。

它使用声明性语法，这意味着我们只需要描述用户界面的外观和行为方式，SwiftUI 会完成其余的实现。为了创建丰富而动态的应用程序，SwiftUI 提供了以下基本组件 −

  • 视图

  • 容器和布局

  • 修饰符

  • 状态和数据绑定

  • 导航

  • 手势

现在，让我们详细讨论每个组件 −

SwiftUI 中的视图

视图是开发用户界面的基本构建块。或者我们可以说它是用户界面的一部分，开发人员可以在其中定义界面的布局和外观。应用程序对用户可见的每个部分都来自开发人员在视图中给出的描述。任何符合 View 协议的类型都充当视图。

名称 描述 语法
Text 用于显示文本。 Text("Hello TutorialsPoint")
Image 用于显示图像。 Image(systemName: "rectangle")
Button 用于创建可点击的按钮 Button(action: { print("Tapped button") }) { Text("Button") }
TextField 用于显示一个文本字段或者创建一个可编辑的文本界面。 @State private var age: String = "" TextField("Enter your age", text: $age)

容器和布局

布局和容器是控制子视图如何排列的结构。一些常用的容器和布局如下 −

名称 描述 语法
VStack 用于垂直堆叠子视图。 VStack { Text("Hello") Text("TutorialsPoint") }
HStack 用于水平堆叠子视图。 HStack { Text("Hello") Text("TutorialsPoint") }
ZStack 用于将子视图叠加在一起 ZStack { Rectangle().fill(Color.mint) Text("TutorialsPoint") }
List 用于显示可滚动的数据列表。 List { Text("Hello") Text("TutorialsPoint") }
Form 用于对数据输入的控件进行分组。 Form { Toggle("Notification", isOn:$isOn) Toggle("Sliding Bar", isOn:$isOn) }

SwiftUI 中的修饰符

SwiftUI 中的修饰符是用于更改视图外观或行为的方法。我们可以按顺序在单个组件上应用多个修饰符。使用它们，我们可以创建简单和复杂的设计。一些常用的修饰符如下−

名称 描述 语法
padding 用于在视图周围添加填充。 .padding()
background 用于设置视图的背景。 .background()
foregroundColor 用于设置文本或者图片的颜色。 .foregroundColor()
fill 用于设置形状的颜色。 .fill()
font 用于改变文本的字体。 .font()
frame 用于设置框架的大小。 .frame()

状态和数据绑定

状态和数据绑定用于管理和传播整个应用程序中的数据。状态用于管理视图的状态。每当使用新值更新状态时，SwiftUI 都会根据新状态自动更新视图。

而绑定用于在 UI 组件与其底层数据模型之间创建关系。它使用双向通信。以下是一些常用的状态和数据绑定对象 −

名称 描述 语法
@State 它是一个管理视图内部状态的属性包装器 @State private var myState:Bool = false
@Binding 它用于创建与父视图中 @state 属性的双向连接。 @Binding var myState:Bool = false
@ObservedObject 它用于在复杂数据模型中观察外部可观察视图。 @ObservedObject var myData = MyObservableObject()
@EnvironmentObject 它用于在 SwiftUI 中的所有视图之间共享数据层次结构。 @EnvironmentObject var myData : MyObservableObject

SwiftUI 中的导航

导航是创建用户界面的过程，允许用户在应用程序中从一个视图移动到另一个视图或屏幕。SwiftUI 提供了各种工具来实现导航，一些常用组件如下−

名称 描述 语法
NavigationLink 用于控制导航呈现。 32
Sheet 用于显示模型视图。 .sheet(isPresented:)

Swift UI 中的手势

手势用于向视图添加交互功能。它们允许用户使用点击、拖动、滑动、旋转等方式与应用程序进行交互。SwiftUI 支持各种内置手势，您可以在手势修饰符的帮助下在视图中使用它们。一些常用的手势如下−

名称 描述 语法
TapGesture 用于检测视图上的点击。 .onTapGesture()
DragGesture 用于检测视图上的拖动动作。 DragGesture()
SpatialTapGesture 用于识别一个或多个点击并报告其位置。 SpatialTapGesture()
❮ SwiftUI 环境 SwiftUI 构建第一个应用程序 ❯