SwiftUI教程（四）布局详解

SwiftUI教程系列文章汇总

本文主要了解SwiftUI中如何进行布局，在SwiftUI没有坐标系这种说法，而是使用弹性布局，我们使用Stacks进行垂直、水平、深度布局，还可以对视图进行偏移或设置到父视图的某个特定位置。

主要内容：

1. SwiftUI的布局
2. VStack
3. HStack
4. ZStack
5. LazyStack
6. 绝对位置position和相对位置offset

1. SwiftUI的布局

UI通常由多种不同类型的视图组合而成。我们如何对他们进行分组以及布局定位？此时就需要使用stacks。我们可以使用三种堆栈来对UI进行分组:

• HStack - 水平排列其子视图
• VStack - 垂直排列其子视图
• ZStack -根据深度排列子视图(例如从后到前)

在这三种Stack的基础上还有一种懒加载的Stack，叫lazyStack.

除此之外还需要了解绝地位置和相对位置的使用

注意： SwiftUI没有坐标系这种说法，使用弹性布局。类似于HTML的布局方式

2. Stacks的使用

垂直布局方式

var body: some View {
    //包括leading、trailing、center
    VStack(alignment:.leading, spacing: 20){
        Text("orange").background(.orange).font(.caption)
        Text("red").background(.red).font(.title)
        Text("blue").background(.blue).font(.largeTitle)
        Text("yellow").background(.yellow).font(.callout)
    }
    .border(.gray)
    //包括bottom、top、firstTextBaseline、lastTextBaseline、center、
    HStack(alignment:.bottom, spacing: 20){
        Text("orange").background(.orange).font(.caption)
        Text("red").background(.red).font(.title)
        Text("blue").background(.blue).font(.largeTitle)
        Text("yellow").background(.yellow).font(.callout)
    }
    .border(.gray)
    //包括leading、trailing、bottom、top、bottomLeading、topLeading、bottomtrailing、toptrailing、center
    ZStack(alignment: .bottomTrailing){
        Text("orange").background(.orange).font(.caption)
        Text("red").background(.red).font(.title)
        Text("blue").background(.blue).font(.largeTitle)
        Text("yellow").background(.yellow).font(.callout)
    }
    .border(.gray)
}

结果：

结果

说明：

1. VStack的Text和button就会垂直分布，Text视图堆叠在Button视图的上方
2. HStack的Text和button会水平分布，Text视图堆叠在Button视图的左侧
3. ZStack的Text和button会水平分布，Text视图堆叠在Button视图的底部
4. 默认情况下一个Stack的两个View之间的间隔很少或没有间隔，但是我们可以通过提供一个参数(spacing)来控制间隔
5. VStack默认也会将视图居中对齐。但我们可以使用' alignment '属性进行更改，这里进行左对齐
6. HStack的语法与VStack相同，包括指定空格和对齐。ZStack也可以指定对齐方式，但是不能指定空格

3. Stacks的混合使用

我们可以将VStack和HStack视图组合在一起进行复杂的安排创建更多视图。

HStack {
    ZStack {
        Circle()
            .fill(Color.yellow)
        Button(action:{
            print("button tapped")
        }){
            Text("Press Me")
        }
    }
    .frame(width: 100.0, height: 100.0)
    VStack(alignment: .leading, spacing: 4) { Text("Beginning SwiftUI")
        Text("Greg Lim, 2021")
    }
}

说明：

1. 我们有一个ZStack和一个VStack嵌套在HStack中
2. VStack本身包含两个Text视图
3. ZStack包含一个圆和一个按钮,这个按钮包含在覆盖在圆的前面
4. 我们调用ZStack的frame modeifier来设置它的宽度和高度为100。
5. 包装在VStack中的视图默认情况下是在中心对齐。我们可以用对齐参数来改变这一点。

4. LazyStack

懒加载的Stack

ScrollView {
    LazyVStack {
        ForEach(1...100, id: \.self) {
            Text("Cell \($0)").padding()
        }
    }
}

说明：

1. scrollView正常情况下会一次性加载VStack里的数据，比如这里的100个item
2. 但是使用lazyVStack后，就只会加载当前页面显示的item
3. 需要注意：lazyVStack必须和scrollView搭配使用，还必须有循环创建，否则无法出现懒加载效果

5.ViewBuilder

ViewBuilder是VStack包装的底层实现
以VStack为例进行说明：

@frozen public struct VStack : View where Content : View {
    public static func buildBlock(_ content: Content) -> Content where Content : View
}

说明：

1. Stack 是通过ViewBuilder来实现底层包装View的
2. 有两个参数，对齐方式和子视图间距
3. 通过buildBlock方法将子视图内容包装成一个视图进行返回

示例：

示例

6. 绝对位置和相对位置

6.1 相对位置offset

查看定义

    @inlinable public func offset(x: CGFloat = 0, y: CGFloat = 0) -> some View
}

说明：

• offset可以传入一个CGSize值，也可以传入x和y坐标
• 偏移量不会改变视图的尺寸，只会改变位置

使用：

VStack (spacing:50){
    Text("Offset by passing CGSize()")
        .border(Color.green)
        .offset(CGSize(width: 20, height: 25))
        .border(Color.gray)

    Text("Offset by passing horizontal & vertical distance")
        .border(Color.green)
        .offset(x: 20, y: 50)
        .border(Color.gray)
}

结果：

结果

说明：

• 灰色边框是原始位置
• offset是将视图以及已经添加的修饰符都进行整体偏移，所以把green也偏移了过去
• 而border是在offset后添加的修饰器，所以仍然在文本的原始位置
• 两种方式仅仅在于方式不一样，效果是完全一样的

6.2 绝对位置position

定义

extension View {
    @inlinable public func position(x: CGFloat = 0, y: CGFloat = 0) -> some View

}

使用：

Text("Position by passing a CGPoint()")
    .background(Color.blue)
    .position(CGPoint(x: 175, y: 100))
    .background(Color.green)
    
Text("Position by passing the x and y coordinates")
    .background(Color.blue)
    .position(CGPoint(x: 175, y: 100))
    .background(Color.green)

结果：

绝对位置

说明：

• position是将视图的中心放置在父视图的特定坐标上。
• 第一个注意的是这里设置的位置是视图的中心位置
• 第二个需要注意的是放置到了父视图的特定坐标上，所以position后设置的颜色充满整个父视图