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