06.布局

在 SwiftUI 中，布局是通过在视图层次结构中嵌套视图来完成的。您可以使用各种视图类型和布局修饰符来控制视图的位置和大小。

布局

SwiftUI 提供了许多布局视图类型，例如 HStack、VStack、ZStack 和 Spacer。这些视图类型用于创建水平、垂直和层叠布局。

HStack

HStack 用于创建水平布局。在 HStack 中添加的视图将按水平方向排列。可以使用 spacing 参数设置每个子视图之间的距离。

HStack(alignment: .center, spacing: 20) {
    Text("Hello")
    Text("World")
}

上面的代码创建了一个水平布局，其中包含两个文本视图，它们之间的距离为 20。

VStack

VStack 用于创建垂直布局。在 VStack 中添加的视图将按垂直方向排列。可以使用 spacing 参数设置每个子视图之间的距离。

VStack(alignment: .leading, spacing: 10) {
    Text("Line 1")
    Text("Line 2")
}

上面的代码创建了一个垂直布局，其中包含两个文本视图，它们之间的距离为 10。

ZStack

ZStack 用于创建层叠布局。在 ZStack 中添加的视图将按添加的顺序显示。最后添加的视图将出现在最上面。

ZStack {
    Rectangle()
        .fill(Color.red)
        .frame(width: 100, height: 100)

    Rectangle()
        .fill(Color.green)
        .frame(width: 80, height: 80)

    Rectangle()
        .fill(Color.blue)
        .frame(width: 60, height: 60)
}

上面的代码创建了一个层叠布局，其中包含三个矩形视图。最后添加的矩形视图将位于最上面。

布局修饰符

SwiftUI 还提供了许多布局修饰符，可以用于更改视图的大小、位置和外观。

frame

frame 修饰符用于设置视图的大小和位置。

Text("Hello, world!")
    .frame(width: 200, height: 50)

上面的代码创建了一个大小为 200x50 的文本视图。

padding

padding 修饰符用于添加填充到视图周围。

Text("Hello, world!")
    .padding()

上面的代码创建了一个文本视图，其周围有默认填充。

background

background 修饰符用于添加背景到视图中。

Text("Hello, world!")
    .background(Color.red)

上面的代码创建了一个红色背景的文本视图。