SwiftUI 视图和控制

329 阅读3分钟

在屏幕上显示您的内容并处理用户交互。

视图和控制是应用程序用户界面的可视化构建块。使用它们在屏幕上显示应用程序的内容。视图代表任何和所有这些的文本、图像、形状、自定义绘图和构图。控件使用户能够与适应其平台和上下文的一致API进行交互。

image.png

使用指定其视觉关系和层次结构的容器组合SwiftUI提供的原始视图,如Declaring a Custom View. 使用名为修饰符的方法自定义内置视图和您为应用程序创建的视图的显示、行为和交互性,如 Configuring Views.

基础会话

创建和组合视图

本教程指导您构建Landmarks——一个用于发现和共享您喜欢的地方的应用程序。您将首先构建显示地标详细信息的视图。

developer.apple.com/tutorials/s…

自定义视图

Declaring a Custom View

定义视图并将其组装到视图层次结构中。

image.png

image.png

image.png

Configuring Views

通过应用视图修饰符来调整视图的特征。

在SwiftUI中,您将视图组装到描述应用程序用户界面的层次结构中。为了帮助您自定义应用程序视图的外观和行为,您可以使用视图修饰符。例如,您可以使用修饰符来:

-向视图添加辅助功能。

-调整视图的样式、布局和其他外观特征。

-响应事件,如复制和粘贴。

-有条件地显示模态视图,如弹出窗口。

-配置支持视图,如工具栏。

由于视图修饰符是具有View协议提供的Swift方法,因此您可以将它们应用于符合View协议的任何类型。这包括原始视图,如TextImageButton,以及您定义的视图。

image.png

image.png

image.png

image.png

image.png

image.png

protocol View

一种表示应用程序用户界面的一部分并提供用于配置视图的修饰符的类型。

image.png

Previews in Xcode

image.png

配置视图元素

Accessibility

让每个人都能访问您的SwiftUI应用程序,包括残疾人。

Appearance

配置视图的前景和背景样式、控件和可见性。

image.png

image.png

image.png

此示例分别显示带有greenred色调的答案按钮和拒绝按钮。

image.png

image.png

image.png

image.png

Text and Symbols

管理视图中文本的渲染、选择和输入。

image.png

image.png

Auxiliary Views

添加和配置支持视图,如工具栏和上下文菜单。

多行文本

func lineLimit(Int?) -> some View

设置文本在此视图中可以占用的最大行数。

image.png

func lineSpacing(CGFloat) -> some View

设置此视图中文本行之间的空格量。

image.png

func multilineTextAlignment(TextAlignment) -> some View

在此视图中设置多行文本的对齐方式。

image.png

enum TextAlignment

在给定的锚类型范围内对齐子视图

image.png

绘图视图

Styles

将内置样式应用于不同类型的视图。

image.png

image.png

image.png

Layout

告诉视图如何通过调整其大小、位置、对齐方式、填充等在视图层次结构中进行排列。

Graphics and Rendering

影响系统绘制视图的方式,例如通过缩放或屏蔽视图,或应用图形效果。

提供互动

Input and Events

提供视图响应用户输入和系统事件执行的操作。

image.png

image.png

View Presentation

为视图在指定条件下显示定义其他视图。

image.png

image.png

image.png

State

访问存储,并提供配置数据的子视图。

设置此视图的唯一标记值。

使用“tag(_:)”来区分一些视图,以便选择选择器和列表等控件。标签值可以是符合Hashable协议的任何类型。

在下面的示例中,Picker视图构建器中的ForEach循环在Flavor'枚举上迭代。它提取每个枚举元素的文本原始值,用作行项标签,并使用枚举项本身作为“tag(_:)”修饰符的输入。标签标识符可以是符合[Hashable`]()协议的任何值:

image.png

视图中包含的“AppStorage”使用的默认存储。