HarmonyOS NEXT - ArkUI: Button组件

Button是按钮组件,通常用于响应用户的点击操作,其类型包括胶囊按钮、圆形按钮、普通按钮。Button做为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

Button组件可以包含子组件。

Button(label?: ResourceStr, options?: { type?: ButtonType, stateEffect?: boolean })

label:按钮显示的文字内容 type:定义按钮样式 stateEffect:设置按钮按下时是否开启切换效果,默认值为true开启。

ButtonType枚举类型:

  • ButtonType.Capsule:胶囊型按钮(圆角为高度的一半),默认值。此类型按钮的圆角自动设置为高度的一半,不支持通过borderRadius属性重新设置圆角。
  • ButtonType.Circle:圆形按钮。此类型按钮为圆形,不支持通过borderRadius属性重新设置圆角。
  • ButtonType.Normal:正常按钮。此类型的按钮默认圆角为0,支持通过borderRadius属性重新设置圆角。

stateEffect: 按钮按下时是否开启按压态显示效果,当设置为false时,按压效果关闭。

  • 默认值:true
  • 说明:当开启按压态显示效果,开发者设置状态样式时,会基于状态样式设置完成后的背景色再进行颜色叠加。

自定义样式

  • 设置边框弧度。使用通用属性来自定义按钮样式。例如通过borderRadius属性设置按钮的边框弧度。
  • 设置文本样式。通过添加文本样式设置按钮文本的展示样式。
  • 设置背景颜色。添加backgroundColor属性设置按钮的背景颜色。

包含子组件

      Button({ type: ButtonType.Circle }) {
        Image($r('app.media.add'))
          .fillColor(Color.White)
          .width(30)
          .height(30)
      }
      .width(50)
      .height(50)

设置按钮点击事件

  .onClick(() => {
    // 处理点击事件逻辑
    this.message+="+";
  })

代码实例:ButtonPage

@Entry
@Component
struct ButtonPage {
  @State message: string = '第4节 Button组件';

  build() {
    Column({space:6}) {
      Text(this.message)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Button("默认胶囊按钮")
      Button('设置为Normal的按钮',{type:ButtonType.Normal})
      Button('圆形按钮',{type:ButtonType.Circle}).width(100)

      Button({type:ButtonType.Circle}){
        Image($r('app.media.add')).fillColor(Color.White).width(30).height(30)
      }.width(50).height(50)
      .onClick(()=>{
        //点击事件业务逻辑
        this.message+="+";
      })
    }
    .height('100%')
    .width('100%')
  }
}
全部评论

相关推荐

点赞 评论 收藏
分享
04-12 13:42
江南大学 C++
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客企业服务