面试题：Swift中SwiftUI视图布局：HStack和VStack的特性与应用

Question

在SwiftUI中，HStack和VStack是常用的布局容器。请阐述它们的主要特性，比如对齐方式、间距设置等。并举例说明如何使用它们实现一个简单的界面，界面要求包含三个按钮，水平排列在顶部，下方垂直排列两个文本标签。

Answer 1

HStack和VStack主要特性

1. 对齐方式
   • HStack：默认水平排列视图，对齐方式由alignment参数控制，可取值如.top、.center、.bottom等，用于控制子视图在垂直方向上的对齐方式。例如.top表示子视图在垂直方向顶部对齐。
   • VStack：默认垂直排列视图，对齐方式同样由alignment参数控制，可取值如.leading、.center、.trailing等，用于控制子视图在水平方向上的对齐方式。例如.leading表示子视图在水平方向起始位置对齐。
2. 间距设置：都可以通过spacing参数设置子视图之间的间距。spacing为nil时，SwiftUI会使用默认间距，也可以传入具体的数值（如10）来指定间距大小。

实现示例代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack(spacing: 20) {
                Button("按钮1") {}
                Button("按钮2") {}
                Button("按钮3") {}
            }
          .padding(.top, 20)
            VStack(spacing: 10) {
                Text("文本标签1")
                Text("文本标签2")
            }
          .padding(.top, 20)
        }
    }
}

在上述代码中，首先使用VStack作为根容器，其内部先放置一个HStack，HStack中水平排列三个Button，通过spacing设置按钮之间间距为20，并通过.padding(.top, 20)使HStack距离顶部有20的间距。接着在HStack下方放置另一个VStack，VStack中垂直排列两个Text标签，通过spacing设置文本标签之间间距为10，并通过.padding(.top, 20)使VStack距离上方HStack有20的间距。