SwiftUI之Button按钮组件使用方式详解与示例

Codeun

2 年前

_{Button 文档官网地址：https://developer.apple.com/documentation/swiftui/button}

在SwiftUI中，Button 是一个常用的用户界面控件，用于执行操作或触发事件，可以通过不同的初始化方法来创建Button按钮。下面列举一些常见初始化方法及其用法说明：

Table of Contents

列举常用的初始化声明方式：

普通文本按钮 public init(_ titleKey: LocalizedStringKey, action: @escaping () -> Void)
- titleKey: LocalizedStringKey 是指一个本地化字符串的键。按钮显示的内容会被转换为相应的本地化字符串。
自定义视图按钮 public init(action: @escaping () -> Void, @ViewBuilder label: () -> Label)
用于列表侧滑按钮 public init(role: ButtonRole?, action: @escaping () -> Void, @ViewBuilder label: () -> Label)
- role: ButtonRole 按钮角色，用于表达该按钮操作的重要性
  - ButtonRole.destructive 用于删除用户数据或执行不可逆操作，需进行二次确认
  - ButtonRole.cancel 用于取消操作
可配置主动触发点击 public init(_ configuration: PrimitiveButtonStyleConfiguration)
- 需遵循 PrimitiveButtonStyle 协议
- 可以主动调用 trigger() 主动触发按钮点击

ButtonStyle

可以通过自定义 ButtonStyle 实现交互效果，通过 configuration.isPressed 区分按钮点击状态，可以根据 isPressed 定义不同状态下的按钮样式。

ButtonStyle 示例代码

// 自定义按钮样式，通过实现 ButtonStyle 协议，创建自定义样式的按钮
struct CustomButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .foregroundColor(.white)
            .background(configuration.isPressed ? Color.blue.opacity(0.7) : Color.blue)
            .cornerRadius(10)
    }
}

Button {
    // todo: Actions
} label: {
    Text("Custom Button")
}
.buttonStyle(CustomButtonStyle())

初始化增强扩展

通过 extension Button where Label == Image 中 Label 的泛型做自定义初始化

示例代码

VStack {
    Button("按钮A") {
        // 这里添加按钮被点击后的操作
    }

    Button(action: {
        // 这里添加按钮被点击后的操作
    }) {
        Image(systemName: "heart.fill")
        .foregroundColor(.red)
    }

    Button {
        // 这里添加按钮被点击后的操作
    } label: {
        VStack {
            Text("按钮")
            .foregroundColor(.white)
        }
        .padding()
        .background(Color.blue)
        .cornerRadius(10)
    }

    List{
        Text("演示侧滑列表Cell")
            .swipeActions {
                Button("分享按钮", action: {})
                Button("取消按钮", role: .cancel, action: {})
                Button("删除按钮", role: .destructive, action: {})
        }
    }

    Button(icon: "gearshape.fill") {
       // 这里添加按钮被点击后的操作         
    }
}

extension Button where Label == Image {
    init(icon: String, action: @escaping () -> Void) {
        self.init(action: action) {
            Image(systemName: icon)
        }
    }
}