SwiftUI 学习(一)

1,115 阅读4分钟

「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战

声明式的编码方式将使代码更易于阅读和理解。SwiftUI 框架允许您编写更少的代码来创建用户界面。 借助 SwiftUI,Apple 为开发人员提供了一个统一的 UI 框架,用于在所有类型的 Apple 设备上构建用户界面。为 iOS 编写的 UI 代码可以轻松移植到您的 watchOS/macOS/watchOS 应用程序,无需修改或只需极少的修改。 这要归功于声明性 UI 框架。代码描述了用户界面的外观。 根据平台的不同,SwiftUI 中的同一段代码可能会导致不同的 UI 控件。 例如,下面的代码声明了一个切换开关:

Toggle(isOn: $isOn) {
    Text("Wifi")
        .font(.system(.title))
        .bold()
}.padding()

对于 iOS 和 iPadOS,切换呈现为开关。 另一方面,SwiftUI 将控件呈现为 macOS 的复选框。

image.png

这个统一框架的美妙之处在于,您可以在所有 Apple 平台上重用大部分代码,而无需进行任何更改。 SwiftUI 做了繁重的工作来渲染相应的控件和布局。虽然 UI 代码可以跨 Apple 平台移植,但您仍然需要针对特定类型的设备提供专门化。 您应该始终查看应用程序的每个版本,以确保设计适合该平台。 也就是说,SwiftUI 已经为您节省了大量学习另一个特定于平台的框架的时间,而且您应该能够重用大部分代码。

第一个项目 - Text 使用

新建一个项目, ContentView 中生成的示例代码已经向您展示了如何显示单行文本。 这里初始化一个 Text 对象并将文本(例如 Hello World)传递给它以显示如下:

image.png

改变字体和大小

在 SwiftUI 中,您可以通过调用称为修饰符的方法来更改控件的属性(例如颜色、字体、粗细)。 假设您想将文本加粗。 您可以使用修饰符 fontWeight 并指定您喜欢的字体粗细(例如 .bold),如下所示:

Text("Hello, world!").fontWeight(.bold)
            .padding()

将 fontWeight设置为.bold,它实际上返回给您一个具有粗体文本的新视图。 SwiftUI 的有趣之处在于,您可以进一步将这个新视图与其他修饰符链接起来。 比如说,你想让加粗的文本更大一点,你可以这样写代码:

Text("Hello, world!").fontWeight(.bold).font(.title)

由于我们可能将多个修饰符链接在一起,因此我们通常以以下格式编写上面的代码:

Text("Hello, world!")
    .fontWeight(.bold)
    .font(.title)

您还可以使用字体修饰符来指定字体设计。 比方说,如果希望字体是rounded的,可以像这样编写字体修饰符:

.font(.system(.title, design: .rounded))

Dynamic Type 是 iOS 的一项功能,它会根据用户的设置(设置 > 显示和亮度 > 文本大小)自动调整字体大小。 换句话说,当您使用文本样式(例如 .title)时,字体大小会发生变化,您的应用会根据用户的偏好自动缩放文本。

要使用固定大小的字体,

.font(.system(size: 20))

这告诉系统使用 20 磅的固定字体大小。

您可以链接其他修饰符以进一步自定义文本。 让我们更改字体颜色。 为此,您可以像这样使用 foregroundColor 修饰符:

.foregroundColor(.green)

处理多行文本

Text默认支持多行,因此它可以在不使用任何附加修饰符的情况下显示一段文本。 用以下代码替换您当前的代码:

image.png

.multilineTextAlignment(.center) # w文本居中对齐
.lineLimit(3) # 限制最大行数为3 设置为nil
.truncationMode(.head) # 文本截断在句首还是句尾

设置行间距

通过 lineSpacing 来设置行间距

.lineSpacing(10)

文本太靠近边缘的左侧和右侧,为了给它更多空间,您可以使用填充修饰符Padding,它会在文本的每一侧添加一些额外的空间。 在 lineSpacing 修饰符之后插入以下代码行:

.padding()

使用自定义字体

首先将字体导入项目中,然后TARGETS->Info 里面添加该字体

image.png

这样修改.font

.font(.custom("Nunito", size: 25))

显示MarkDown 文本

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents. Created by John Gruber in 2004, Markdown is now one of the world’s most popular markup languages.

在 iOS 15 中,SwiftUI 内置了对渲染 Markdown 的支持。 要使用 Markdown 渲染文本,您需要做的就是在 Markdown 中指定文本。 文本视图会自动为您呈现文本。 这是一个例子:

image.png