SwiftUI-布局案例

介绍

import SwiftUI

struct ContentView : View {    
    var body: some View {
        Text("Hello World!")
    }
}

它的结构如下：RootView —> ContentView —> Text，那么 Text 是如何显示在屏幕上的？官方的介绍是如下 3 个步骤。

1. 父视图为子视图提供预估尺寸。
2. 子视图计算自己的实际尺寸。
3. 父视图根据子视图的尺寸将子视图放在自身的坐标系中。

最重要的是第 2 步，通常有 3 种设置尺寸的方式。

1. 无需计算，根据内容推断，如 Image 根据图片大小，Text 根据文字范围。
2. 使用 frame 强制指定宽高。
3. 设置缩放比例，如 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)
    }
}

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

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 中正常显示。

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)
    }
}

1. 总宽度间距为 300，其中间距为 2 * 10，边距为 2 * 10，所以布局空间为：280-40 = 240。
2. 堆栈将空间分成 3 个相等的部分，每个部分的宽度为 80。
3. 将 80 这个尺寸推荐给最不灵活的孩子。案例中为 Image，其尺寸为 80x80。
4. 堆栈从剩余空间中减去 Image 的宽度，因此剩余空间为 240-80 = 160。
5. 堆栈再次将空间分成 2 个相等的部分，每个部分的宽度为 80。
6. 它建议第 1 个 Text 的大小为 80x200。Text 回应内容不适合，但它至少可以显示一部分内容。第 2 个文本视图也是如此。因此，尽管文本视图的文本量不同，但它们的宽度都相同，都为 80。

Stack3.png