import SwiftUI
struct ContentView : View {
var body: some View {
Text("Hello World!")
}
}
它的结构如下:RootView —> ContentView —> Text
,那么 Text 是如何显示在屏幕上的?官方的介绍是如下 3 个步骤。
最重要的是第 2 步,通常有 3 种设置尺寸的方式。
准备一个 100*100 的图片。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200)
.border(Color.blue)
}
}
frame1.png
只有当 frame 大于内容的尺寸时,alignment 才有意义。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200, alignment: .topTrailing)
.border(Color.blue)
}
}
frame2.png
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 中正常显示。
Stack1.png
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。
Stack2.png
第 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)
}
}