SwiftUI 精通之路04: Stacks 以及 Spacer

前言

更新还在继续... 这是我继续参加 第四期创作者训练营 的文章,继续不断总结自己的学习经历。点击查看活动链接。

今日学习鸡汤: 过去不等于未来，但是未来不一定是美好的！还是想想当下...

本章节是比较轻松，我们主要学习的内容是视图的排列方式，以及Spacer间隔的使用。

好的废话不多说，我们进入正文 🫧 ！

正文

SwiftUI 中的堆栈视图，通过组合水平和垂直堆栈中的视图，您可以为应用程序构建复杂的用户界面。Stacks 堆栈有 3 种类型：HStack、VStack 和 ZStack。

我们进入点击Xcode顶部导航的 File > New > File from Template 选择 iOS > SwiftUI 模版创建新的SwiftUI文件

快捷键 command + N，我们新建文件名为 StacksAndSpacer.swift

Vstack 垂直堆栈

VStack 允许您从 上 到 下 垂直堆叠视图。您可以通过向 VStack 添加对齐 alignment 或间距 padding 来进一步自定义视图。

// 设置对齐方式alignment: .leading ,设置当前垂直堆栈子元素垂直方向间距 16
VStack(alignment: .leading, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}

Hstack 水平堆栈

HStack 用于水平堆叠视图。就像 VStack 一样，你可以设置对齐方式 alignment 和间距 padding 。

HStack(alignment: .bottom, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}

Spacer 间隔垫片

其实我也知道怎么翻译才是对的...

默认情况下，SwiftUI 中的堆栈将占用最小空间并居中对齐。间隔垫片（Spacer）对于推动内容使用最大空间至关重要。它对于对齐元素也很有用。

HStack(alignment: .bottom, spacing: 16) {
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}
.padding()
.frame(width: 320)

Zstack 覆盖堆栈

ZStack 非常适合重叠内容。它在 3 维平面中将各层堆叠在一起。由于元素可以浮动在彼此之上，因此 ZStack 的对齐方式会将所有项目移至一个位置。

 ZStack(alignment: .topLeading) {
    Rectangle()
        .foregroundColor(.blue)
    Text("Hello, world!")
        .font(.title)
    Spacer()
    Text("Second line")
}
.padding()
.frame(width: 320)

好的！

关于Stacks 以及 Spacer 的内容就这么多，有什么不对的欢迎指出来，一起进步！很很高兴在这里见到你，下章再见！