SwiftUI-Button组件学习

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

基本用法
  • Button 组件的基本用法是绑定一个动作(action)和一个视图(label)。按钮的 action 会在用户点击按钮时执行。
less 复制代码
Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}
按钮样式和修饰符

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

1. 自定义文本样式

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

scss 复制代码
Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .font(.title)
        .foregroundColor(.white)
        .padding()
        .background(Color.blue)
        .cornerRadius(10)
}
2. 添加阴影和圆角

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

scss 复制代码
Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .font(.title)
        .padding()
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(15)
        .shadow(radius: 10)  // 添加阴影
}
3. 改变按钮大小

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

css 复制代码
Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
        .frame(width: 200, height: 60)
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(10)
}
4. 禁用按钮
  • disabled() 修饰符将按钮设置为禁用状态,按钮将无法响应任何交互。
scss 复制代码
@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) - 普通按钮(默认值)
  • 这是默认的按钮类型,表示一个普通的按钮,没有特殊的语义含义。
css 复制代码
Button(action: {
    print("Normal button clicked!")
}) {
    Text("Normal Button")
}
2.role(.destructive) - 销毁性按钮
  • 这个角色表示一个具有破坏性的按钮,通常用于表示删除、销毁等操作。通常,具有这个角色的按钮会以不同的视觉效果呈现(如红色背景),并且在无障碍支持中,系统会更明确地标识其具有破坏性。
less 复制代码
Button(role: .destructive, action: {
    print("Delete action triggered!")
}) {
    Text("Delete Item")
        .foregroundColor(.red)  // 通常销毁性按钮会有红色文字
}
3.role(.cancel) - 取消按钮
  • 这个角色用于表示取消操作的按钮。它通常用于关闭对话框、弹出框或其他界面元素,表示用户想要放弃当前操作。
less 复制代码
Button(role: .cancel, action: {
    print("Cancel button clicked!")
}) {
    Text("Cancel")
        .foregroundColor(.blue)
}

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

按钮的交互状态

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

1. 使用 @State 管理按钮的点击状态
scss 复制代码
@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 来实现按钮的不同交互效果。例如,改变按钮按下时的样式。

scss 复制代码
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:) 来加载系统图标。

scss 复制代码
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 是默认的按钮样式,按钮在按下时不会改变样式。
less 复制代码
Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}
.buttonStyle(PlainButtonStyle())  // 使用默认样式
2. BorderedButtonStyle
  • BorderedButtonStyle 提供了一个带有边框的按钮样式。
less 复制代码
Button(action: {
    print("Button clicked!")
}) {
    Text("Click Me")
}
.buttonStyle(BorderedButtonStyle())  // 带有边框的按钮样式
3. PlainButtonStyle + Hover Effect (macOS)
  • HoverEffect 适用于 macOSiPadOS,当用户将鼠标悬停在按钮上时,可以看到按钮的变化。
less 复制代码
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
相关推荐
大熊猫侯佩12 小时前
在肖申克监狱玩转 iOS 26:安迪的 Liquid Glass 复仇计划
ios·swiftui·swift
非专业程序员15 小时前
逆向分析CoreText中的字体级联/Font Fallback机制
前端·ios
库奇噜啦呼21 小时前
【iOS】简单的四则运算
macos·ios·cocoa
white-persist1 天前
【burp手机真机抓包】Burp Suite 在真机(Android and IOS)抓包手机APP + 微信小程序详细教程
android·前端·ios·智能手机·微信小程序·小程序·原型模式
恋猫de小郭2 天前
Fluttercon EU 2025 :Let‘s go far with Flutter
android·开发语言·flutter·ios·golang
2501_915909062 天前
iOS 抓包工具有哪些?实战对比、场景分工与开发者排查流程
android·开发语言·ios·小程序·uni-app·php·iphone
2501_915918413 天前
iOS 框架全解析,原生框架与跨平台框架对比、开发应用打包与 App Store 上架实战经验
android·ios·小程序·https·uni-app·iphone·webview
感谢地心引力3 天前
iOS26 打开开发者模式
windows·macos·ios·iphone·ios26
低调小一3 天前
iPhone美区账号登录指南:轻松下载ChatGPT应用
ios·chatgpt·iphone
2501_916007474 天前
前端开发工具都有哪些?常用前端开发工具清单与场景化推荐
android·ios·小程序·https·uni-app·iphone·webview