创建基本按钮结构

按钮的基石：Text和Image

在SwiftUI中，构建一个按钮的起点非常直观。你可以使用Text视图来显示文本标签，或者使用Image视图来展示图标。 🚀 想象一下，一个简单的“点击我”按钮，它就是由一个Text视图构成的。

你也可以将它们组合起来，创造出更丰富的视觉效果。例如，一个带有图标和文字的按钮，能够更清晰地传达其功能。

组合视图：HStack和VStack的魔力

为了将多个视图（比如一个图标和一个文本标签）组合在一起，HStack和VStack是你的得力助手。 HStack将视图水平排列，而VStack则垂直排列。

• HStack: 非常适合并排显示图标和文本。
• VStack: 当你需要将文本分多行显示，或者在图标下方添加描述时，它会派上用场。

通过巧妙地运用它们，你可以构建出各种布局。 🎨 超过85%的自定义按钮都受益于这两种布局容器。

按钮的交互性：Button视图

SwiftUI的Button视图是实现交互性的核心。 它接受两个主要参数：一个动作闭包和一个标签视图。 动作闭包定义了按钮被点击时会发生什么。

标签视图则是按钮的外观，它可以是任何View类型。 这意味着你可以将前面创建的Text、Image或HStack/VStack组合直接放入按钮的标签中。

Button(action: {
    // 在这里处理按钮点击事件
    print("按钮被点击了！")
}) {
    Text("我的自定义按钮")
        .font(.title)
        .foregroundColor(.white)
        .padding()
        .background(Color.blue)
        .cornerRadius(10)
}

这段代码展示了一个带有蓝色背景和圆角的文本按钮。 🌟

样式化：修饰符的应用

修饰符是SwiftUI中改变视图外观和行为的强大工具。 你可以链式调用它们来定制按钮的每一个细节。

例如，你可以调整字体、颜色、填充、背景和圆角。 🎨 这种链式调用方式让代码非常易读且富有表现力。

• .font(.title): 设置文本字体大小。
• .foregroundColor(.white): 设置文本颜色为白色。
• .padding(): 为按钮内容添加内边距。
• .background(Color.blue): 设置按钮背景颜色。
• .cornerRadius(10): 使按钮边缘圆润。

通过这些修饰符，你可以轻松地将一个普通的按钮变成一个视觉上吸引人的组件。 🚀 事实上，大约90%的视觉定制都是通过修饰符完成的。