带着实例学 SwiftUI: Stack 系列布局三剑客

IOS

2023-12-20 15:22:42

SwiftUI 开发之旅：Stack 系列布局剖析

SwiftUI 中的 Stack 布局

Stack 布局是 SwiftUI 中最常用的布局方式之一。它可以用来构建出各种各样的布局，包括垂直布局、水平布局、叠放布局等。Stack 布局的语法非常简单，只需要在 Stack 的内部放置子视图即可。

VStack：VStack 是一个垂直布局的 Stack。它可以将子视图垂直排列。
HStack：HStack 是一个水平布局的 Stack。它可以将子视图水平排列。
ZStack：ZStack 是一个叠放布局的 Stack。它可以将子视图叠放在一起。

使用 Stack 来构建 Flex 布局

Flex 布局是一种非常流行的布局方式，它可以用来构建出非常复杂的布局。Flex 布局的语法比较复杂，但是在 SwiftUI 中，我们可以使用 Stack 来轻松地实现 Flex 布局。

要使用 Stack 来实现 Flex 布局，我们需要使用 HStack 和 VStack 来组合使用。我们可以通过设置 HStack 和 VStack 的 alignment 属性来控制子视图的排列方式。

实例

以下是一个使用 Stack 来构建 Flex 布局的实例：

struct MyFlexView: View {
  var body: some View {
    VStack {
      HStack {
        Text("Item 1")
          .frame(width: 100, height: 100)
          .background(Color.red)
        Text("Item 2")
          .frame(width: 100, height: 100)
          .background(Color.green)
      }
      HStack {
        Text("Item 3")
          .frame(width: 100, height: 100)
          .background(Color.blue)
        Text("Item 4")
          .frame(width: 100, height: 100)
          .background(Color.yellow)
      }
    }
  }
}