探索鸿蒙 Button组件

Button

1.声明button组件 Button(label?:ResourceStr)

label是按钮上面显示的文字 如果不传入label 则需要在内部嵌套其他组件

内部嵌套其他组件

可以放入icon图标来构建自己想要的样式

按钮类型

按钮使用type(ButtonType.xxx)属性来设置,xxx的类型分为三种

1.Capsule 胶囊型按钮

2.Circle 圆形按钮

3.Normal 普通按钮

事件方法

按钮最重要的肯定就是点击事件 使用.onClick()回调函数来实现

点击按钮实现更改图片大小实现

我们通过点击事件来动态的设置响应式imageWidth的值,来实现图片大小的改变,然后做了一个兼容,让他不能为负数,不能超出屏幕宽度

TypeScript 复制代码
@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  @State imageWidth: number = 300
  build() {
    Row() {
      Column() {
        Image($r('app.media.hongmeng'))
          .width(this.imageWidth)
          .margin(10)
        Button("缩小")
          .type(ButtonType.Capsule)
          .width(200)
          .height(100)
          .fontSize(20)
          .margin(10)
          .onClick(()=>{
            if(this.imageWidth >= 30){
              this.imageWidth -= 30
            }

          })
        Button("放大")
          .type(ButtonType.Capsule)
          .width(200)
          .height(100)
          .fontSize(20)
          .onClick(()=>{
            if(this.imageWidth <= 300){
              this.imageWidth += 30
            }
          })
      }

      .width('100%')
    }
    .height('100%')
  }
}
相关推荐
大白要努力!1 小时前
Android opencv使用Core.hconcat 进行图像拼接
android·opencv
天空中的野鸟2 小时前
Android音频采集
android·音视频
小白也想学C3 小时前
Android 功耗分析(底层篇)
android·功耗
曙曙学编程3 小时前
初级数据结构——树
android·java·数据结构
闲暇部落5 小时前
‌Kotlin中的?.和!!主要区别
android·开发语言·kotlin
诸神黄昏EX7 小时前
Android 分区相关介绍
android
大白要努力!8 小时前
android 使用SQLiteOpenHelper 如何优化数据库的性能
android·数据库·oracle
Estar.Lee9 小时前
时间操作[取当前北京时间]免费API接口教程
android·网络·后端·网络协议·tcp/ip
Winston Wood9 小时前
Perfetto学习大全
android·性能优化·perfetto
Dnelic-12 小时前
【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录
android·junit·单元测试·android studio·自学笔记