# 布局系统

URL: https://caijiao.org/swift/13-swiftui-basics/04-layout
Source: docs/swift/13-swiftui-basics/04-layout.md
Description: 本章介绍 SwiftUI 的布局系统，讲解如何使用布局容器和修饰符来构建响应式和灵活的用户界面。

SwiftUI 提供多种布局容器和工具，帮助开发者设计自适应和整洁的界面。

## 主要布局容器

- **VStack**：垂直堆叠子视图。

```swift
VStack {
    Text("上方")
    Text("下方")
}
````

* **HStack**：水平排列子视图。

```swift
HStack {
    Text("左边")
    Text("右边")
}
```

* **ZStack**：层叠视图，类似叠加。

```swift
ZStack {
    Image("背景")
    Text("前景文本")
}
```

## 布局修饰符

* `padding()`：添加内边距。
* `frame(width:height:alignment:)`：设置视图尺寸和对齐。
* `Spacer()`：弹性空间，推开视图。
* `alignment`：设置子视图对齐方式。

```swift
HStack {
    Text("左")
    Spacer()
    Text("右")
}
.padding()
```

## 响应式布局

SwiftUI 自动根据屏幕尺寸调整布局，支持多设备适配。

## 总结

SwiftUI 布局系统灵活且强大，通过组合容器和修饰符，轻松实现各种复杂界面。