SwiftUI中如何创建一个显示'Hello World'的蓝色文本标签？

题目

SwiftUI中如何创建一个显示'Hello World'的蓝色文本标签？

信息

• 类型：问答
• 难度：⭐

考点

Text视图使用, 修改文本颜色, 视图修饰符

快速回答

在SwiftUI中创建蓝色文本标签需要三个步骤：

1. 使用Text("Hello World")创建基础文本视图
2. 通过.foregroundColor(.blue)修饰符设置文本颜色
3. 使用.font()修饰符设置字体样式（可选）

核心实现代码

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
            .foregroundColor(.blue)  // 设置文本颜色
            .font(.title)           // 设置字体样式（可选）
    }
}

原理说明

SwiftUI采用声明式语法构建UI：

• Text视图：基础文本组件，用于显示字符串
• 修饰符（Modifiers）：以链式调用方式修改视图属性，每个修饰符返回新视图
• 颜色设置：.foregroundColor()专用于设置文本/图形颜色，支持系统颜色（如.blue）或自定义颜色

最佳实践

• 保持修饰符顺序：某些修饰符（如字体/颜色）顺序无关，但布局相关修饰符（如.padding）顺序敏感
• 使用系统颜色：.blue会自动适配深色/浅色模式，比硬编码Color(red:0, green:0, blue:1)更佳
• 代码格式化：将修饰符分行书写提高可读性

常见错误

• 错误1：尝试在Text初始化中直接设置颜色
  Text("Hello", color: .blue) // 编译错误！
• 错误2：混淆foregroundColor和background
.background(.blue) // 设置背景色而非文字颜色
• 错误3：遗漏修饰符的点语法
  Text("Hello") foregroundColor(.blue) // 缺少点号，编译错误

扩展知识

• 自定义颜色：.foregroundColor(Color(red: 0.2, green: 0.5, blue: 0.8))
• 动态颜色：.foregroundColor(.primary)自动适配系统配色方案
• 组合修饰符：可连续添加多个修饰符
  Text("Hello").bold().italic().underline()
• 资源颜色：在Assets中定义颜色后使用Color("CustomBlue")