SwiftUI-Button组件学习

在 SwiftUI 中，Button 组件用于创建一个可点击的按钮，它可以触发某个动作或事件。Button 是一种非常常用的 UI 组件，通常用来触发用户的交互，如提交数据、导航到新页面等。

基本用法

• Button 组件的基本用法是绑定一个动作（action）和一个视图（label）。按钮的 action 会在用户点击按钮时执行。

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}

按钮样式和修饰符

SwiftUI 提供了许多修饰符来定制按钮的外观和行为。你可以使用这些修饰符调整按钮的尺寸、背景色、形状、阴影、文字样式等。

1. 自定义文本样式

你可以通过 Text 组件设置按钮的标签文本样式。

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .font(.title)
        .foregroundColor(.white)
        .padding()
        .background(Color.blue)
        .cornerRadius(10)
}

2. 添加阴影和圆角

你可以使用 shadow 和 cornerRadius 等修饰符来增强按钮的视觉效果。

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .font(.title)
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(15)
        .shadow(radius: 10)  // 添加阴影
}

3. 改变按钮大小

可以通过 frame() 来设置按钮的固定大小。

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .frame(width: 200, height: 60)
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}

4. 禁用按钮

• disabled() 修饰符将按钮设置为禁用状态，按钮将无法响应任何交互。

@State private var isDisabled = false

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}
.disabled(isDisabled)  // 根据状态禁用按钮

5.按钮的角色

role 修饰符可以有以下几个常用值：

1.role(.button) - 普通按钮（默认值）

• 这是默认的按钮类型，表示一个普通的按钮，没有特殊的语义含义。

Button(action: {
    print("Normal button clicked!")
}) {
    Text("Normal Button")
}

2.role(.destructive) - 销毁性按钮

• 这个角色表示一个具有破坏性的按钮，通常用于表示删除、销毁等操作。通常，具有这个角色的按钮会以不同的视觉效果呈现（如红色背景），并且在无障碍支持中，系统会更明确地标识其具有破坏性。

Button(role: .destructive, action: {
    print("Delete action triggered!")
}) {
    Text("Delete Item")
        .foregroundColor(.red)  // 通常销毁性按钮会有红色文字
}

3.role(.cancel) - 取消按钮

• 这个角色用于表示取消操作的按钮。它通常用于关闭对话框、弹出框或其他界面元素，表示用户想要放弃当前操作。

Button(role: .cancel, action: {
    print("Cancel button clicked!")
}) {
    Text("Cancel")
        .foregroundColor(.blue)
}

role 的最大优势之一是帮助无障碍辅助技术（如 VoiceOver）理解按钮的语义。设置了 role 的按钮能够告诉辅助技术它的目的，使得视障用户能够更好地理解和使用你的应用。

按钮的交互状态

SwiftUI 中的按钮可以通过不同的状态来改变它的外观。例如，按钮在被按下时可能需要改变颜色或大小。你可以通过 ButtonStyle 或使用 @State 来管理按钮的状态。

1. 使用 @State 管理按钮的点击状态

@State private var isButtonPressed = false

Button(action: {
    isButtonPressed.toggle()
}) {
    Text(isButtonPressed ? "Pressed" : "Click Me")
        .padding()
        .background(isButtonPressed ? Color.green : Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}

2. 使用 ButtonStyle 自定义按钮的样式

你可以通过自定义 ButtonStyle 来实现按钮的不同交互效果。例如，改变按钮按下时的样式。

struct MyButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(configuration.isPressed ? Color.red : Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            .scaleEffect(configuration.isPressed ? 0.9 : 1)  // 按下时缩小
            .animation(.spring())
    }
}

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}
.buttonStyle(MyButtonStyle())  // 应用自定义样式

按钮的图标和文本

你也可以在按钮中组合图标和文本。通常，图标使用 Image(systemName:) 来加载系统图标。

Button(action: {
    print("Button clicked!")
}) {
    HStack {
        Image(systemName: "star.fill")
            .foregroundColor(.yellow)
        Text("Favorite")
            .font(.title)
    }
    .padding()
    .background(Color.blue)
    .foregroundColor(.white)
    .cornerRadius(10)
}

预定义按钮样式

SwiftUI 提供了几种预定义的按钮样式，你可以快速为按钮应用。

1. PlainButtonStyle

• PlainButtonStyle 是默认的按钮样式，按钮在按下时不会改变样式。

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}
.buttonStyle(PlainButtonStyle())  // 使用默认样式

2. BorderedButtonStyle

• BorderedButtonStyle 提供了一个带有边框的按钮样式。

Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}
.buttonStyle(BorderedButtonStyle())  // 带有边框的按钮样式

3. PlainButtonStyle + Hover Effect (macOS)

• HoverEffect 适用于 macOS 和 iPadOS，当用户将鼠标悬停在按钮上时，可以看到按钮的变化。

Button(action: {
    print("Button clicked!")
}) {
    Text("Hover Over Me")
}
.buttonStyle(PlainButtonStyle())
.hoverEffect(.highlight)

SwiftUI Button 预定义按钮样式

样式名称	描述	使用示例
PlainButtonStyle	默认样式，按钮没有特殊的装饰或变化。适用于最基本的按钮需求。	swift\nButton("Click Me")\n .buttonStyle(PlainButtonStyle())\n
BorderedButtonStyle	带有边框的按钮样式，通常会有一个细的边框。适用于表单按钮等。	swift\nButton("Click Me")\n .buttonStyle(BorderedButtonStyle())\n
BorderlessButtonStyle	不带边框的按钮样式，适合一些特定的交互样式或无边框按钮。	swift\nButton("Click Me")\n .buttonStyle(BorderlessButtonStyle())\n
PlainButtonStyle()	没有自动的视觉变化或效果。常用于自定义外观的按钮。	swift\nButton("Click Me")\n .buttonStyle(PlainButtonStyle())\n
LinkButtonStyle	适用于Link组件的按钮样式，按钮看起来像是一个可点击的链接。	swift\nButton("Click Me")\n .buttonStyle(LinkButtonStyle())\n
DefaultButtonStyle	默认按钮样式（通常和PlainButtonStyle相同），适用于默认的交互。	swift\nButton("Click Me")\n .buttonStyle(DefaultButtonStyle())\n