探索鸿蒙 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-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭2 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日3 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安3 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑3 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟7 小时前
CTF Web的数组巧用
android
小蜜蜂嗡嗡8 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi008 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体
zhangphil10 小时前
Android理解onTrimMemory中ComponentCallbacks2的内存警戒水位线值
android
你过来啊你10 小时前
Android View的绘制原理详解
android