探索鸿蒙 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%')
  }
}
相关推荐
一笑的小酒馆6 小时前
Android性能优化之截屏时黑屏卡顿问题
android
懒人村杂货铺8 小时前
Android BLE 扫描完整实战
android
TeleostNaCl10 小时前
如何安装 Google 通用的驱动以便使用 ADB 和 Fastboot 调试(Bootloader)设备
android·经验分享·adb·android studio·android-studio·android runtime
fatiaozhang952711 小时前
中国移动浪潮云电脑CD1000-系统全分区备份包-可瑞芯微工具刷机-可救砖
android·网络·电脑·电视盒子·刷机固件·机顶盒刷机
2501_9159184112 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
lichong95112 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone
Android出海12 小时前
Android 15重磅升级:16KB内存页机制详解与适配指南
android·人工智能·新媒体运营·产品运营·内容运营
一只修仙的猿12 小时前
毕业三年后,我离职了
android·面试
编程乐学13 小时前
安卓非原创--基于Android Studio 实现的新闻App
android·ide·android studio·移动端开发·安卓大作业·新闻app
雅雅姐14 小时前
Android14 init.rc中on boot阶段操作4
android