创建按钮(Button)

按钮基础

在 SwiftUI 中，创建按钮非常直观。你只需要使用 Button 视图，并为其提供一个动作闭包和一个标签视图。这个标签视图可以是任何 SwiftUI 视图，比如 Text、Image 甚至是自定义视图。

例如，一个简单的文本按钮可以这样创建：

Button("点击我") {
    print("按钮被点击了！")
}

这个按钮会显示“点击我”字样，并在用户点击时在控制台打印一条消息。是不是超级简单？🚀

自定义按钮样式

SwiftUI 提供了强大的修饰符，让你能够轻松定制按钮的外观。你可以改变按钮的背景颜色、字体、边框等等。

让我们看一个例子，如何创建一个带有背景色和圆角的按钮：

Button {
    print("自定义按钮被点击！")
} label: {
    Text("提交")
        .font(.title)
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}

这个按钮看起来更具吸引力，用户体验也更好。✨

• .font(.title)：设置文本字体大小。
• .padding()：增加按钮内部的填充。
• .background(Color.blue)：设置按钮背景为蓝色。
• .foregroundColor(.white)：设置文本颜色为白色。
• .cornerRadius(10)：给按钮添加圆角。

按钮的交互状态

按钮在不同的交互状态下可以有不同的视觉表现，例如按下时、禁用时。你可以使用 buttonStyle 修饰符来定义这些状态。

SwiftUI 内置了一些按钮样式，比如 BorderedButtonStyle 和 PlainButtonStyle。

Button("边框按钮") {
    print("边框按钮被点击！")
}
.buttonStyle(.bordered)

Button("纯文本按钮") {
    print("纯文本按钮被点击！")
}
.buttonStyle(.plain)

你甚至可以创建自定义的 ButtonStyle 来实现更复杂的交互效果。这为你的应用带来了无限的可能性！

按钮的启用与禁用

控制按钮的启用和禁用状态非常重要，这能有效引导用户操作。你可以通过条件判断来控制按钮的 disabled 修饰符。

例如，当某个条件不满足时，按钮将无法点击：

@State private var isButtonEnabled = false

var body: some View {
    Button("启用/禁用按钮") {
        print("按钮被点击了！")
    }
    .disabled(!isButtonEnabled)
    Toggle("启用按钮", isOn: $isButtonEnabled)
}

当 isButtonEnabled 为 false 时，按钮会变灰且无法点击。这种细致的交互设计能极大提升用户满意度。👍 超过 85% 的用户表示，清晰的交互反馈能显著提升他们的应用使用体验。