SwiftUI-布局案例

随笔7个月前发布 龙行天下
87 0 0

介绍

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

SwiftUI-布局案例

只有当 frame 大于内容的尺寸时,alignment 才有意义。

struct ContentView: View {
    var body: some View {
        Image("img")
            .border(Color.black)
            .frame(width: 200, height: 200, alignment: .topTrailing)
            .border(Color.blue)
    }
}

SwiftUI-布局案例

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

SwiftUI-布局案例

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。

SwiftUI-布局案例

复杂案例

第 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,其尺寸为 80×80。
  4. 堆栈从剩余空间中减去 Image 的宽度,因此剩余空间为 240-80 = 160。
  5. 堆栈再次将空间分成 2 个相等的部分,每个部分的宽度为 80。
  6. 它建议第 1 个 Text 的大小为 65×120。Text 回应内容不适合,但它至少可以显示一部分内容。第 2 个文本视图也是如此。因此,尽管文本视图的文本量不同,但它们的宽度都相同,都为 80。

SwiftUI-布局案例

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...