SwiftUI 基本视图组件

SwiftUI 提供了一系列基础视图组件，方便快速构建界面。这些组件通过组合可以实现复杂的 UI 布局。以下是 SwiftUI 中一些常用的基本视图组件介绍。

1. Text

Text 用于显示文本内容，是最常用的组件之一。它可以设置字体、颜色、对齐方式等。

Text("Hello, SwiftUI!")
    .font(.title)
    .foregroundColor(.blue)
    .padding()

在这个例子中，Text 显示了文本 "Hello, SwiftUI!"，并设置了字体和颜色。

2. Image

Image 用于显示图片，可以从系统图片库或自定义资源中加载。

Image(systemName: "star.fill")
    .foregroundColor(.yellow)
    .font(.largeTitle)

使用 systemName 参数可以加载 SF Symbols 中的图标。上面的例子会显示一个黄色的星星图标。

3. Button

Button 是一个交互组件，可以添加点击事件。通过 action 参数指定点击时要执行的操作。

Button(action: {
    print("Button tapped")
}) {
    Text("Tap me")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
}

在这个例子中，点击按钮时会在控制台输出 "Button tapped"。

4. TextField

TextField 用于获取用户输入的文本。它需要一个绑定的字符串变量来保存输入内容。

@State private var name: String = ""

var body: some View {
    TextField("Enter your name", text: $name)
        .padding()
        .border(Color.gray)
}

在这里，name 使用 @State 声明，用于保存用户输入的文本。

5. Toggle

Toggle 是一个开关组件，可以用于布尔类型的状态切换。

@State private var isOn: Bool = false

var body: some View {
    Toggle(isOn: $isOn) {
        Text("Enable feature")
    }
    .padding()
}

在这个例子中，isOn 状态控制 Toggle 的开启或关闭状态。

6. Slider

Slider 是一个滑动选择器，用于在特定范围内选择数值。

@State private var sliderValue: Double = 0.5

var body: some View {
    Slider(value: $sliderValue, in: 0...1)
        .padding()
}

在这里，sliderValue 保存滑块的当前值，范围在 0 到 1 之间。

7. Picker

Picker 用于提供多选项选择器，支持单选和多选模式。

@State private var selectedColor = "Red"
let colors = ["Red", "Green", "Blue"]

var body: some View {
    Picker("Select a color", selection: $selectedColor) {
        ForEach(colors, id: \.self) { color in
            Text(color).tag(color)
        }
    }
    .pickerStyle(SegmentedPickerStyle())
    .padding()
}

在这个例子中，用户可以在 “Red”、“Green”和“Blue”中选择一个颜色。

8. VStack、HStack 和 ZStack

VStack、HStack 和 ZStack 是用于布局的容器组件。

  • VStack：垂直堆叠视图。
  • HStack：水平堆叠视图。
  • ZStack：在 Z 轴上叠放视图。
VStack {
    Text("Top")
    Text("Bottom")
}

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

ZStack {
    Color.blue
    Text("Overlay Text")
        .foregroundColor(.white)
}

在这个例子中，VStack 将视图垂直排列，HStack 水平排列，ZStack 实现重叠布局。

9. List

List 用于显示一个动态或静态的列表视图，适合展示大量内容。

let fruits = ["Apple", "Banana", "Cherry"]

var body: some View {
    List(fruits, id: \.self) { fruit in
        Text(fruit)
    }
}

在这个例子中，List 组件会显示一个包含 "Apple"、"Banana" 和 "Cherry" 的列表。

10. Spacer

Spacer 是一个空白填充视图，通常用于在布局中创建灵活的间距。

HStack {
    Text("Left")
    Spacer()
    Text("Right")
}

在这个示例中，Spacer 会将 "Left" 和 "Right" 文本分开，使它们位于 HStack 的两侧。

总结

SwiftUI 提供了丰富的基本视图组件，方便开发者快速搭建界面。通过组合这些组件，可以实现灵活的布局和响应式的界面设计：

  • Text 和 Image 用于显示内容。
  • Button 和 Toggle 等组件用于交互。
  • VStack、HStack 和 ZStack 等用于布局。
  • List 和 Spacer 用于列表和间距调整。

掌握这些基本组件是 SwiftUI 开发的关键，可以帮助我们更高效地构建用户界面。

Last Updated::