HarmonyOS【ArkUI组件--Button】

1.Button基本使用

2. 通过按钮实现图片放大缩小

在此博客的基础上继续编写:

HarmonyOS【ArkUI组件--TextInput】-CSDN博客

①关键代码如下:

②完整代码如下:

javascript 复制代码
import font from '@ohos.font'
@Entry
@Component
struct Index {
  @State imageWidth:number= 30

  build() {
    Row() {
      Column() {

        Image($r('app.media.app_icon'))
          .width(this.imageWidth)
          .interpolation(ImageInterpolation.High)
        Text($r('app.string.width_label'))
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        TextInput({text:this.imageWidth.toFixed(0)})
          .width(150)
          .backgroundColor('#36D')
          .type(InputType.Number)
          .onChange(value => {
            this.imageWidth=parseInt(value)
          })
        Button('缩小')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.imageWidth>=10){
              this.imageWidth-=10
            }
          })
        Button('放大')
          .width(80)
          .fontSize(20)
          .onClick(()=>{
            if(this.imageWidth<300){
              this.imageWidth+=10
            }
          })
      }

      .width('100%')
    }
    .height('100%')
  }
}

③效果如下:

相关推荐
高心星21 小时前
鸿蒙5.0项目开发——V2装饰器@Event的使用
harmonyos
ChinaDragon1 天前
HarmonyOS:创建ArkTS卡片
harmonyos
高心星1 天前
HarmonyOS 5.0应用开发——V2装饰器@once的使用
harmonyos
程序员潘Sir1 天前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
猫林老师1 天前
HarmonyOS数据持久化:Preferences轻量级存储实战
华为·harmonyos
Devil枫1 天前
鸿蒙深链落地实战:从安全解析到异常兜底的全链路设计
安全·华为·harmonyos
广州腾科助你拿下华为认证1 天前
华为考试:HCIE数通考试难度分析
大数据·华为
与天仙漫步星海1 天前
华为基本命令
华为
低调小一2 天前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos