鸿蒙入门08-Button组件

最新推荐文章于 2024-05-21 23:21:19 发布

进阶H5小白

最新推荐文章于 2024-05-21 23:21:19 发布

阅读量137

点赞数 4

文章标签：前端鸿蒙 harmonyos 华为

本文链接：https://blog.csdn.net/qq_42660453/article/details/137955028

版权

按钮组件

可以快速创建不同样式的按钮

可以使用通用属性修饰

参数

参数名

参数类型

是否必填

参数描述

label

ResourceStr

否

按钮的文本内容

options

{

type?: ButtonType,

stateEffect?: boolean

}

否

按钮的配置项

type：按钮的样式

stateEffect：按钮的按压效果

ButtonType 枚举说明

名称	描述
Capsule	胶囊型按钮（圆角默认为高度的一半）
Circle	圆形按钮
Normal	普通按钮（默认为不带圆角）

示例 1

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Button('A', {
          type: ButtonType.Circle,
          stateEffect: false
        })

        Blank()

        Button('OK', {
          type: ButtonType.Capsule,
          stateEffect: true
        })

        Blank()

        Button('Disable', {
          type: ButtonType.Normal,
          stateEffect: false
        }).opacity(0.4)
      }.width('100%').height(100).padding(20)
    }
  }
}

示例 2

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Button('登录')

        Blank()

        Button('注册').backgroundColor(Color.Orange)
      }.width('100%').height(100).padding(20)
    }
  }
}

示例 3

支持组件嵌套（就相当于是原先的双标签，内部可以继续嵌套其他结构）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Button() {
          Row() {
            LoadingProgress().width(20).height(20).color(0xFFFFFF)
            Text('Loading')
          }
        }.height(50).padding(10).backgroundColor(Color.Orange)
      }.width('100%').height(100).padding(20)
    }
  }
}