# 构建基础视图

URL: https://caijiao.org/swift/13-swiftui-basics/03-basic-views
Source: docs/swift/13-swiftui-basics/03-basic-views.md
Description: 本章介绍 SwiftUI 中构建基础视图的方法，涵盖常用视图组件及其布局，帮助开发者快速搭建用户界面。

SwiftUI 提供丰富的基础视图组件，用于构建应用界面。

## 常用视图组件

- **Text**：显示文本内容。

```swift
Text("欢迎使用 SwiftUI")
````

* **Image**：显示图片。

```swift
Image(systemName: "star.fill")
    .foregroundColor(.yellow)
```

* **Button**：可点击按钮。

```swift
Button("点击我") {
    print("按钮被点击")
}
```

## 布局视图

* **VStack**：垂直排列子视图。

```swift
VStack {
    Text("第一行")
    Text("第二行")
}
```

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

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

* **ZStack**：层叠排列子视图。

```swift
ZStack {
    Image("background")
    Text("覆盖文本")
}
```

## 视图修饰符

通过修饰符调整视图样式和布局：

```swift
Text("加粗文本")
    .font(.headline)
    .foregroundColor(.blue)
    .padding()
```

## 总结

掌握基础视图组件和布局容器，是构建灵活、优美 SwiftUI 界面的基础。