鸿蒙开发组件之Button

Lu_Ca

已于 2023-12-12 15:20:12 修改

阅读量1k

点赞数 10

分类专栏：鸿蒙开发文章标签： harmonyos 华为

于 2023-12-09 12:50:16 首次发布

本文链接：https://blog.csdn.net/Lu_Ca/article/details/134884747

版权

鸿蒙开发专栏收录该内容

42 篇文章 9 订阅

订阅专栏

一、Button按钮呈现有两种方式：

1、可以直接设置文本，呈现文本按钮

Button('点我')

2、也可以自定义按钮，嵌套其他的组件实现

Button() {
    Image($r('app.mdedia.xxx'))
        .width(120)
        .margin(10)
}

其中，文本类型Button组件可以通过设置type属性来改变按钮的形态，例如：圆形，圆角，直角(Normal)

按钮最重要的功能就是点击事件，可以通过onclick来添加点击事件

Button('点我')
    .onClick(() => {
       console.log('点击了按钮')
 })

3、设置按钮不同状态的效果

可以通过属性stateStyles来控制按钮在不同状态下的效果

Button(this.buttonState)
          .width(300)
          .height(50)
          .margin({top:100})
          .stateStyles({
            normal:{
              .backgroundColor(Color.Pink)
            },
            pressed:{
              .backgroundColor(Color.Blue)
            },
            disabled:{
              .backgroundColor(Color.Gray)
            }

          })