探索鸿蒙 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%')
  }
}
相关推荐
太过平凡的小蚂蚁16 分钟前
Kotlin 异步数据流三剑客:Flow、Channel、StateFlow 深度解析
android·kotlin
铭哥的编程日记1 小时前
【Linux】库制作与原理
android·linux·运维
fatiaozhang95272 小时前
高安版_中兴B860AV3.2M_晶晨S905L3B_安卓9_兼容uwe5621ds无线-线刷固件包
android·电脑·电视盒子·av1·刷机固件
恋猫de小郭3 小时前
深入理解 Flutter 的 PlatformView 如何在鸿蒙平台实现混合开发
android·前端·flutter
Nturmoils4 小时前
基于Rokid CXR-M SDK实现智能眼镜实时翻译应用:从零到一的完整实践
android
我想吃辣条5 小时前
flutter google play 应用不支持 16 KB
android·flutter
宴西笔记5 小时前
手机AIDE使用OpenCV
android
阳光明媚sunny14 小时前
Room持久化库中,@Transaction注解的正确使用场景是?
android·数据库
我是好小孩14 小时前
【Android】六大设计原则
android·java·运维·服务器·设计模式
铉铉这波能秀19 小时前
如何在Android Studio中使用Gemini进行AI Coding
android·java·人工智能·ai·kotlin·app·android studio