介绍
import SwiftUI
struct ContentView : View {
var body: some View {
Text("Hello World!")
}
}
它的结构如下:RootView —> ContentView —> Text
,那么 Text 是如何显示在屏幕上的?官方的介绍是如下 3 个步骤。
- 父视图为子视图提供预估尺寸。
- 子视图计算自己的实际尺寸。
- 父视图根据子视图的尺寸将子视图放在自身的坐标系中。
最重要的是第 2 步,通常有 3 种设置尺寸的方式。
- 无需计算,根据内容推断,如 Image 根据图片大小,Text 根据文字范围。
- 使用 frame 强制指定宽高。
- 设置缩放比例,如 Image 设置 aspectRatio。
frame
准备一个 100*100 的图片。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200)
.border(Color.blue)
}
}
只有当 frame 大于内容的尺寸时,alignment 才有意义。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200, alignment: .topTrailing)
.border(Color.blue)
}
}
Stack
案例一
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Image("img")
}
.frame(width: 250, height: 200)
.border(Color.blue)
}
}
总宽度超过 2 个 Image 和 spacing 之和,所以内容在 HStack 中正常显示。
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Image("img")
}
.frame(width: 140, height: 200)
.border(Color.blue)
}
}
总宽度小于 2 个 Image 和 spacing 之和,所以内容会超出 HStack。
复杂案例
第 1 步:堆栈计算出内部间距和边距,并将其从其父视图建议的大小中减去。
第 2 步:对于每个剩余视图,堆栈将剩余空间分成相等的部分。然后选择其中一个作为最不灵活的孩子,从未分配的空间中扣除其大小,然后重复该过程。
第 3 步:所有的孩子都有尺寸以后,堆栈使用间距将它们对齐,并根据指定的对齐方式将它们对齐。最后,堆栈选择自己的大小以便完全包含子级。
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Text("所有的孩子都有尺寸以后,堆栈使用间距将它们对齐,并根据指定的对齐方式将它们对齐。最后,堆栈选择自己的大小以便完全包含子级。")
Text("所有的孩子都有尺寸以后,堆栈使用间距将它们对齐,并根据指定的对齐方式将它们对齐。最后,堆栈选择自己的大小以便完全包含子级。")
}
.padding(.horizontal, 10)
.frame(width: 280, height: 200)
.border(Color.blue)
}
}
- 总宽度间距为 300,其中间距为 2 * 10,边距为 2 * 10,所以布局空间为:280-40 = 240。
- 堆栈将空间分成 3 个相等的部分,每个部分的宽度为 80。
- 将 80 这个尺寸推荐给最不灵活的孩子。案例中为 Image,其尺寸为 80×80。
- 堆栈从剩余空间中减去 Image 的宽度,因此剩余空间为 240-80 = 160。
- 堆栈再次将空间分成 2 个相等的部分,每个部分的宽度为 80。
- 它建议第 1 个 Text 的大小为 65×120。Text 回应内容不适合,但它至少可以显示一部分内容。第 2 个文本视图也是如此。因此,尽管文本视图的文本量不同,但它们的宽度都相同,都为 80。
© 版权声明
文章版权归作者所有,未经允许请勿转载。
相关文章
暂无评论...