HarmonyOS应用开发实战 | ArkTS按钮控件使用指南

红目香薰

发布于 2025-12-16 15:39:42

2520

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

💫 坚果派·红目香薰 倾情分享
🎯 用心打造每一个技术细节，为开发者创造更多价值
📱 让HarmonyOS开发变得更简单、更有趣

✨ 写在前面的话

嗨，亲爱的技术朋友们！👋

我是来自坚果派的红目香薰，一个热爱技术、专注HarmonyOS开发的程序媛。在这个数字化飞速发展的时代，HarmonyOS作为华为自主研发的操作系统，正在改变着我们的数字生活体验。

🌈 为什么要写这个系列？

💡 让复杂的技术变得简单易懂
🚀 帮助更多开发者快速上手HarmonyOS
💝 分享实战经验，避免踩坑
🌟 用代码创造美好，用技术传递温暖

每一个Demo都是我精心设计和反复测试的结果，希望能够为你的HarmonyOS开发之路点亮一盏明灯。✨

今天我们来深入学习HarmonyOS中最重要的交互组件之一——按钮控件（Button）。从基础样式到高级动效，让我们一起打造令人惊艳的按钮体验！

📋 Demo功能说明

🎯 核心功能

本Demo展示了HarmonyOS中Button组件的全面使用方法，包括：

🎨 基础按钮样式（文本、图标、组合）
🌈 多种按钮类型（主要、次要、危险、成功）
📐 不同按钮尺寸（大、中、小、自定义）
🎭 按钮状态管理（正常、禁用、加载中）
✨ 渐变色和阴影效果
🎯 自定义形状按钮（圆形、胶囊、方形）
💫 动画效果和交互反馈
🔄 按钮组和切换按钮

✨ 特色亮点

🎨 视觉丰富：20+种不同样式的按钮展示
🎯 交互完善：点击反馈、状态切换、动画效果
📱 响应式设计：适配不同屏幕尺寸和设备
💡 实用性强：涵盖实际开发中的各种按钮需求
🌟 代码优雅：使用@Builder构建可复用组件

🎨 界面展示

界面采用分类展示的卡片布局：

基础按钮区域：文本、图标、组合按钮
样式按钮区域：不同颜色和主题的按钮
尺寸按钮区域：大中小不同尺寸展示
状态按钮区域：正常、禁用、加载状态
特效按钮区域：渐变、阴影、动画效果
形状按钮区域：圆形、胶囊、自定义形状

📱 适用场景

🛍️ 电商应用的购买、加购物车按钮
📱 社交应用的点赞、分享、关注按钮
📝 表单应用的提交、重置、取消按钮
🎮 游戏应用的开始、暂停、设置按钮
⚙️ 设置页面的开关、确认按钮
📊 数据应用的筛选、导出按钮

🔧 核心代码说明

📁 项目结构

ButtonDemo/

├── src/

│   ├── main/

│   │   ├── ets/

│   │   │   ├── pages/

│   │   │   │   └── Index.ets          // 主页面

│   │   │   └── entryability/

│   │   └── resources/

│   │       ├── base/

│   │       │   ├── element/

│   │       │   └── media/

│   │       └── rawfile/

│   └── module.json5

🎯 关键技术点

1. Button组件基础属性

Button('按钮文本')

  .width(120)

  .height(40)

  .fontSize(16)

  .fontColor(Color.White)

  .backgroundColor('#3498DB')

  .borderRadius(8)

2. 按钮类型设置

ButtonType.Normal: 普通按钮（默认）
ButtonType.Capsule: 胶囊按钮
ButtonType.Circle: 圆形按钮

3. 按钮状态管理

Button('按钮')

  .enabled(this.isEnabled)

  .stateEffect(true)  // 启用状态效果

  .onClick(() => {

    // 点击事件处理

  })

4. 自定义按钮样式

backgroundColor: 背景颜色
borderRadius: 圆角半径
border: 边框样式
shadow: 阴影效果
linearGradient: 渐变背景

💡 技术要点解析

按钮状态效果：

通过stateEffect属性可以启用按钮的默认状态效果，包括按下时的视觉反馈。

渐变背景实现：

使用linearGradient属性可以为按钮添加渐变背景，创建更加吸引人的视觉效果。

动画效果集成：

结合animateTo函数可以为按钮添加自定义动画效果，提升用户体验。

📝 完整Demo代码

🏠 主页面代码

// src/main/ets/pages/Index.ets

@Entry

@Component

struct Index {

  @State isLiked: boolean = false

  @State isFollowed: boolean = false

  @State isLoading: boolean = false

  @State selectedTab: number = 0

  @State buttonScale: number = 1

  @State likeCount: number = 128

  @State followCount: number = 1024

  build() {

    Scroll() {

      Column({ space: 20 }) {

        // 标题区域

        this.buildTitleSection()

       

        // 基础按钮

        this.buildBasicButtonSection()

       

        // 样式按钮

        this.buildStyledButtonSection()

       

        // 尺寸按钮

        this.buildSizeButtonSection()

       

        // 状态按钮

        this.buildStateButtonSection()

       

        // 特效按钮

        this.buildEffectButtonSection()

       

        // 形状按钮

        this.buildShapeButtonSection()

       

        // 交互按钮

        this.buildInteractiveButtonSection()

      }

      .width('100%')

      .padding(20)

    }

    .backgroundColor('#F5F5F5')

    .height('100%')

  }

  // 标题区域

  @Builder

  buildTitleSection() {

    Column({ space: 10 }) {

      Text('🎯 HarmonyOS按钮控件')

        .fontSize(28)

        .fontWeight(FontWeight.Bold)

        .fontColor(Color.White)

        .textAlign(TextAlign.Center)

        .width('100%')

        .padding(20)

        .borderRadius(15)

        .linearGradient({

          angle: 45,

          colors: [['#FF6B6B', 0.0], ['#4ECDC4', 0.5], ['#45B7D1', 1.0]]

        })

        .shadow({

          radius: 15,

          color: '#40000000',

          offsetX: 0,

          offsetY: 8

        })

      Text('打造令人惊艳的按钮体验')

        .fontSize(16)

        .fontColor('#666666')

        .textAlign(TextAlign.Center)

        .fontStyle(FontStyle.Italic)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 基础按钮

  @Builder

  buildBasicButtonSection() {

    Column({ space: 15 }) {

      Text('🎨 基础按钮样式')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      // 文本按钮

      Row({ space: 15 }) {

        Button('主要按钮')

          .width(100)

          .height(40)

          .fontSize(14)

          .backgroundColor('#3498DB')

          .borderRadius(8)

          .onClick(() => {

            console.log('主要按钮点击')

          })

        Button('次要按钮')

          .width(100)

          .height(40)

          .fontSize(14)

          .backgroundColor('#95A5A6')

          .borderRadius(8)

          .onClick(() => {

            console.log('次要按钮点击')

          })

        Button('危险按钮')

          .width(100)

          .height(40)

          .fontSize(14)

          .backgroundColor('#E74C3C')

          .borderRadius(8)

          .onClick(() => {

            console.log('危险按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 图标按钮

      Row({ space: 15 }) {

        Button({ type: ButtonType.Circle }) {

          Text('❤️')

            .fontSize(20)

        }

        .width(50)

        .height(50)

        .backgroundColor('#E91E63')

        .onClick(() => {

          console.log('爱心按钮点击')

        })

        Button({ type: ButtonType.Circle }) {

          Text('⭐')

            .fontSize(20)

        }

        .width(50)

        .height(50)

        .backgroundColor('#FF9800')

        .onClick(() => {

          console.log('星星按钮点击')

        })

        Button({ type: ButtonType.Circle }) {

          Text('👍')

            .fontSize(20)

        }

        .width(50)

        .height(50)

        .backgroundColor('#4CAF50')

        .onClick(() => {

          console.log('点赞按钮点击')

        })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 组合按钮

      Row({ space: 10 }) {

        Button() {

          Row({ space: 8 }) {

            Text('📥')

              .fontSize(16)

            Text('下载')

              .fontSize(14)

              .fontColor(Color.White)

          }

        }

        .width(80)

        .height(35)

        .backgroundColor('#9C27B0')

        .borderRadius(20)

        .onClick(() => {

          console.log('下载按钮点击')

        })

        Button() {

          Row({ space: 8 }) {

            Text('🔗')

              .fontSize(16)

            Text('分享')

              .fontSize(14)

              .fontColor(Color.White)

          }

        }

        .width(80)

        .height(35)

        .backgroundColor('#FF5722')

        .borderRadius(20)

        .onClick(() => {

          console.log('分享按钮点击')

        })

        Button() {

          Row({ space: 8 }) {

            Text('⚙️')

              .fontSize(16)

            Text('设置')

              .fontSize(14)

              .fontColor(Color.White)

          }

        }

        .width(80)

        .height(35)

        .backgroundColor('#607D8B')

        .borderRadius(20)

        .onClick(() => {

          console.log('设置按钮点击')

        })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 样式按钮

  @Builder

  buildStyledButtonSection() {

    Column({ space: 15 }) {

      Text('🌈 多彩样式按钮')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      // 渐变按钮

      Row({ space: 15 }) {

        Button('渐变蓝')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor(Color.White)

          .borderRadius(20)

          .linearGradient({

            angle: 45,

            colors: [['#667eea', 0.0], ['#764ba2', 1.0]]

          })

          .onClick(() => {

            console.log('渐变蓝按钮点击')

          })

        Button('渐变粉')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor(Color.White)

          .borderRadius(20)

          .linearGradient({

            angle: 45,

            colors: [['#f093fb', 0.0], ['#f5576c', 1.0]]

          })

          .onClick(() => {

            console.log('渐变粉按钮点击')

          })

        Button('渐变绿')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor(Color.White)

          .borderRadius(20)

          .linearGradient({

            angle: 45,

            colors: [['#4facfe', 0.0], ['#00f2fe', 1.0]]

          })

          .onClick(() => {

            console.log('渐变绿按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 边框按钮

      Row({ space: 15 }) {

        Button('边框按钮')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor('#3498DB')

          .backgroundColor(Color.Transparent)

          .border({

            width: 2,

            color: '#3498DB'

          })

          .borderRadius(8)

          .onClick(() => {

            console.log('边框按钮点击')

          })

        Button('虚线边框')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor('#E74C3C')

          .backgroundColor(Color.Transparent)

          .border({

            width: 2,

            color: '#E74C3C',

            style: BorderStyle.Dashed

          })

          .borderRadius(8)

          .onClick(() => {

            console.log('虚线边框按钮点击')

          })

        Button('点线边框')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor('#27AE60')

          .backgroundColor(Color.Transparent)

          .border({

            width: 2,

            color: '#27AE60',

            style: BorderStyle.Dotted

          })

          .borderRadius(8)

          .onClick(() => {

            console.log('点线边框按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 阴影按钮

      Row({ space: 15 }) {

        Button('浅阴影')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#FF9800')

          .borderRadius(8)

          .shadow({

            radius: 5,

            color: '#40FF9800',

            offsetX: 0,

            offsetY: 3

          })

          .onClick(() => {

            console.log('浅阴影按钮点击')

          })

        Button('深阴影')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#9C27B0')

          .borderRadius(8)

          .shadow({

            radius: 10,

            color: '#609C27B0',

            offsetX: 0,

            offsetY: 5

          })

          .onClick(() => {

            console.log('深阴影按钮点击')

          })

        Button('彩色阴影')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#E91E63')

          .borderRadius(8)

          .shadow({

            radius: 8,

            color: '#80E91E63',

            offsetX: 2,

            offsetY: 4

          })

          .onClick(() => {

            console.log('彩色阴影按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 尺寸按钮

  @Builder

  buildSizeButtonSection() {

    Column({ space: 15 }) {

      Text('📐 不同尺寸按钮')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      Column({ space: 15 }) {

        // 大按钮

        Button('大按钮 (Large)')

          .width(200)

          .height(50)

          .fontSize(18)

          .fontWeight(FontWeight.Medium)

          .backgroundColor('#2ECC71')

          .borderRadius(12)

          .onClick(() => {

            console.log('大按钮点击')

          })

        // 中按钮

        Button('中按钮 (Medium)')

          .width(150)

          .height(40)

          .fontSize(16)

          .backgroundColor('#3498DB')

          .borderRadius(10)

          .onClick(() => {

            console.log('中按钮点击')

          })

        // 小按钮

        Button('小按钮 (Small)')

          .width(100)

          .height(32)

          .fontSize(14)

          .backgroundColor('#E67E22')

          .borderRadius(8)

          .onClick(() => {

            console.log('小按钮点击')

          })

        // 迷你按钮

        Button('迷你')

          .width(60)

          .height(24)

          .fontSize(12)

          .backgroundColor('#9B59B6')

          .borderRadius(6)

          .onClick(() => {

            console.log('迷你按钮点击')

          })

      }

      .width('100%')

      .alignItems(HorizontalAlign.Center)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 状态按钮

  @Builder

  buildStateButtonSection() {

    Column({ space: 15 }) {

      Text('🎭 按钮状态管理')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      Row({ space: 15 }) {

        // 正常状态

        Button('正常状态')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#27AE60')

          .borderRadius(8)

          .enabled(true)

          .onClick(() => {

            console.log('正常状态按钮点击')

          })

        // 禁用状态

        Button('禁用状态')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#BDC3C7')

          .borderRadius(8)

          .enabled(false)

        // 加载状态

        Button() {

          Row({ space: 8 }) {

            if (this.isLoading) {

              LoadingProgress()

                .width(16)

                .height(16)

                .color(Color.White)

            }

            Text(this.isLoading ? '加载中...' : '点击加载')

              .fontSize(14)

              .fontColor(Color.White)

          }

        }

        .width(90)

        .height(40)

        .backgroundColor('#3498DB')

        .borderRadius(8)

        .onClick(() => {

          this.isLoading = true

          setTimeout(() => {

            this.isLoading = false

          }, 2000)

        })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 切换按钮

      Row({ space: 15 }) {

        Button(this.isLiked ? '❤️ 已喜欢' : '🤍 喜欢')

          .width(100)

          .height(40)

          .fontSize(14)

          .backgroundColor(this.isLiked ? '#E74C3C' : '#95A5A6')

          .borderRadius(20)

          .onClick(() => {

            this.isLiked = !this.isLiked

            if (this.isLiked) {

              this.likeCount++

            } else {

              this.likeCount--

            }

          })

        Button(this.isFollowed ? '✅ 已关注' : '➕ 关注')

          .width(100)

          .height(40)

          .fontSize(14)

          .backgroundColor(this.isFollowed ? '#27AE60' : '#3498DB')

          .borderRadius(20)

          .onClick(() => {

            this.isFollowed = !this.isFollowed

            if (this.isFollowed) {

              this.followCount++

            } else {

              this.followCount--

            }

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 状态显示

      Row({ space: 30 }) {

        Text(`❤️ ${this.likeCount}`)

          .fontSize(16)

          .fontColor('#E74C3C')

        Text(`👥 ${this.followCount}`)

          .fontSize(16)

          .fontColor('#3498DB')

      }

      .width('100%')

      .justifyContent(FlexAlign.Center)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 特效按钮

  @Builder

  buildEffectButtonSection() {

    Column({ space: 15 }) {

      Text('✨ 特效按钮')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      Row({ space: 15 }) {

        // 缩放动画按钮

        Button('缩放动画')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#FF6B6B')

          .borderRadius(8)

          .scale({ x: this.buttonScale, y: this.buttonScale })

          .onClick(() => {

            animateTo({

              duration: 200,

              curve: Curve.EaseInOut

            }, () => {

              this.buttonScale = 0.9

            })

            setTimeout(() => {

              animateTo({

                duration: 200,

                curve: Curve.EaseInOut

              }, () => {

                this.buttonScale = 1

              })

            }, 200)

          })

        // 发光效果按钮

        Button('发光效果')

          .width(90)

          .height(40)

          .fontSize(14)

          .backgroundColor('#4ECDC4')

          .borderRadius(8)

          .shadow({

            radius: 15,

            color: '#804ECDC4',

            offsetX: 0,

            offsetY: 0

          })

          .onClick(() => {

            console.log('发光效果按钮点击')

          })

        // 霓虹效果按钮

        Button('霓虹效果')

          .width(90)

          .height(40)

          .fontSize(14)

          .fontColor('#FF1493')

          .backgroundColor(Color.Transparent)

          .border({

            width: 2,

            color: '#FF1493'

          })

          .borderRadius(8)

          .shadow({

            radius: 10,

            color: '#80FF1493',

            offsetX: 0,

            offsetY: 0

          })

          .onClick(() => {

            console.log('霓虹效果按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 形状按钮

  @Builder

  buildShapeButtonSection() {

    Column({ space: 15 }) {

      Text('🔷 不同形状按钮')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      Row({ space: 15 }) {

        // 圆形按钮

        Button('圆')

          .width(60)

          .height(60)

          .fontSize(16)

          .backgroundColor('#E91E63')

          .borderRadius(30)

          .onClick(() => {

            console.log('圆形按钮点击')

          })

        // 胶囊按钮

        Button('胶囊按钮')

          .width(120)

          .height(40)

          .fontSize(14)

          .backgroundColor('#9C27B0')

          .borderRadius(20)

          .onClick(() => {

            console.log('胶囊按钮点击')

          })

        // 方形按钮

        Button('方')

          .width(60)

          .height(60)

          .fontSize(16)

          .backgroundColor('#FF5722')

          .borderRadius(0)

          .onClick(() => {

            console.log('方形按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      Row({ space: 15 }) {

        // 菱形效果按钮

        Button('菱形')

          .width(50)

          .height(50)

          .fontSize(14)

          .backgroundColor('#607D8B')

          .borderRadius(8)

          .rotate({ angle: 45 })

          .onClick(() => {

            console.log('菱形按钮点击')

          })

        // 椭圆按钮

        Button('椭圆按钮')

          .width(140)

          .height(50)

          .fontSize(14)

          .backgroundColor('#795548')

          .borderRadius(25)

          .onClick(() => {

            console.log('椭圆按钮点击')

          })

        // 不规则圆角

        Button('不规则')

          .width(80)

          .height(40)

          .fontSize(14)

          .backgroundColor('#009688')

          .borderRadius({ topLeft: 20, topRight: 5, bottomLeft: 5, bottomRight: 20 })

          .onClick(() => {

            console.log('不规则按钮点击')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

  // 交互按钮

  @Builder

  buildInteractiveButtonSection() {

    Column({ space: 15 }) {

      Text('💫 交互式按钮组')

        .fontSize(20)

        .fontWeight(FontWeight.Medium)

        .fontColor('#333333')

        .margin({ bottom: 10 })

      // 标签页按钮组

      Row({ space: 5 }) {

        Button('首页')

          .width(60)

          .height(35)

          .fontSize(14)

          .backgroundColor(this.selectedTab === 0 ? '#3498DB' : '#ECF0F1')

          .fontColor(this.selectedTab === 0 ? Color.White : '#7F8C8D')

          .borderRadius(8)

          .onClick(() => {

            this.selectedTab = 0

          })

        Button('发现')

          .width(60)

          .height(35)

          .fontSize(14)

          .backgroundColor(this.selectedTab === 1 ? '#3498DB' : '#ECF0F1')

          .fontColor(this.selectedTab === 1 ? Color.White : '#7F8C8D')

          .borderRadius(8)

          .onClick(() => {

            this.selectedTab = 1

          })

        Button('消息')

          .width(60)

          .height(35)

          .fontSize(14)

          .backgroundColor(this.selectedTab === 2 ? '#3498DB' : '#ECF0F1')

          .fontColor(this.selectedTab === 2 ? Color.White : '#7F8C8D')

          .borderRadius(8)

          .onClick(() => {

            this.selectedTab = 2

          })

        Button('我的')

          .width(60)

          .height(35)

          .fontSize(14)

          .backgroundColor(this.selectedTab === 3 ? '#3498DB' : '#ECF0F1')

          .fontColor(this.selectedTab === 3 ? Color.White : '#7F8C8D')

          .borderRadius(8)

          .onClick(() => {

            this.selectedTab = 3

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 浮动操作按钮

      Row({ space: 15 }) {

        Button({ type: ButtonType.Circle }) {

          Text('📞')

            .fontSize(20)

        }

        .width(60)

        .height(60)

        .backgroundColor('#4CAF50')

        .shadow({

          radius: 10,

          color: '#404CAF50',

          offsetX: 0,

          offsetY: 5

        })

        .onClick(() => {

          console.log('拨打电话')

        })

        Button({ type: ButtonType.Circle }) {

          Text('💬')

            .fontSize(20)

        }

        .width(60)

        .height(60)

        .backgroundColor('#2196F3')

        .shadow({

          radius: 10,

          color: '#402196F3',

          offsetX: 0,

          offsetY: 5

        })

        .onClick(() => {

          console.log('发送消息')

        })

        Button({ type: ButtonType.Circle }) {

          Text('✉️')

            .fontSize(20)

        }

        .width(60)

        .height(60)

        .backgroundColor('#FF9800')

        .shadow({

          radius: 10,

          color: '#40FF9800',

          offsetX: 0,

          offsetY: 5

        })

        .onClick(() => {

          console.log('发送邮件')

        })

      }

      .width('100%')

      .justifyContent(FlexAlign.SpaceEvenly)

      // 操作确认按钮组

      Row({ space: 20 }) {

        Button('取消')

          .width(100)

          .height(40)

          .fontSize(16)

          .fontColor('#7F8C8D')

          .backgroundColor(Color.Transparent)

          .border({

            width: 1,

            color: '#BDC3C7'

          })

          .borderRadius(8)

          .onClick(() => {

            console.log('取消操作')

          })

        Button('确认')

          .width(100)

          .height(40)

          .fontSize(16)

          .backgroundColor('#27AE60')

          .borderRadius(8)

          .onClick(() => {

            console.log('确认操作')

          })

      }

      .width('100%')

      .justifyContent(FlexAlign.Center)

    }

    .width('100%')

    .backgroundColor(Color.White)

    .padding(20)

    .borderRadius(12)

    .alignItems(HorizontalAlign.Start)

    .shadow({

      radius: 8,

      color: '#20000000',

      offsetX: 0,

      offsetY: 2

    })

  }

}

⚙️ 配置文件

// module.json5 配置

{

  "module": {

    "name": "entry",

    "type": "entry",

    "description": "$string:module_desc",

    "mainElement": "EntryAbility",

    "deviceTypes": [

      "phone",

      "tablet"

    ],

    "deliveryWithInstall": true,

    "installationFree": false,

    "pages": "$profile:main_pages",

    "abilities": [

      {

        "name": "EntryAbility",

        "srcEntry": "./ets/entryability/EntryAbility.ts",

        "description": "$string:EntryAbility_desc",

        "icon": "$media:icon",

        "label": "$string:EntryAbility_label",

        "startWindowIcon": "$media:icon",

        "startWindowBackground": "$color:start_window_background"

      }

    ]

  }

}

🚀 运行效果

📱 界面展示

运行后的界面将展示：

🎯 渐变色标题，展示按钮控件主题
🎨 基础按钮：文本、图标、组合按钮
🌈 多彩样式：渐变、边框、阴影按钮
📐 不同尺寸：大、中、小、迷你按钮
🎭 状态管理：正常、禁用、加载、切换状态
✨ 特效按钮：缩放动画、发光、霓虹效果
🔷 形状按钮：圆形、胶囊、方形、菱形等
💫 交互按钮：标签页、浮动操作、确认按钮组

✅ 功能验证

基础功能：点击各种按钮，查看控制台输出
状态切换：测试喜欢、关注按钮的状态变化
加载效果：点击加载按钮，观察loading动画
动画效果：点击缩放动画按钮，查看动画效果
标签切换：点击标签页按钮，观察选中状态变化

💡 开发小贴士

🎯 最佳实践

💫 按钮尺寸：遵循44dp最小触摸目标原则
🎨 颜色搭配：使用品牌色系，保持视觉一致性
⚡ 性能优化：避免过度使用阴影和渐变效果
🔧 交互反馈：使用stateEffect提供按压反馈

🚨 常见问题

按钮点击无响应：检查onClick事件是否正确绑定
样式不生效：确保属性设置顺序正确，后设置的会覆盖前面的
动画卡顿：减少复杂动画的使用，优化动画性能

📚 扩展学习

自定义按钮组件：封装可复用的按钮组件
按钮无障碍：添加无障碍支持，提升用户体验
主题适配：实现深色模式下的按钮样式适配

🎉 总结与展望

通过这个Demo，我们学习了：

✨ Button组件的基础属性和高级特性
🎯 各种按钮样式和状态的实现方法
💡 创建美观按钮界面的设计技巧
🎨 动画效果和交互反馈的实现

Button组件作为用户界面中最重要的交互元素之一，掌握其各种用法对于创建优秀的用户体验至关重要。从简单的文本按钮到复杂的动画效果，每一个细节都体现着应用的品质。

希望这个示例能够帮助到正在学习HarmonyOS开发的你！下一期我们将探索更多有趣的交互组件，敬请期待！如果你有任何问题或建议，欢迎在评论区留言交流。

🔗 相关资源

🌟 如果这篇文章对你有帮助，请点赞支持！🌟

让我们一起在HarmonyOS的世界里创造更多可能！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-12-16，如有侵权请联系 cloudcommunity@tencent.com 删除

harmonyos

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度