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%')
  }
}

③效果如下:

相关推荐
诚实可靠王大锤4 小时前
react-native项目通过华为OBS预签名url实现前端直传
前端·react native·华为
程序员潘Sir5 小时前
鸿蒙应用开发从入门到实战(五):ArkUI概述
harmonyos·鸿蒙
安卓开发者16 小时前
鸿蒙Next ArkWeb网页交互管理:从基础到高级实战
华为·交互·harmonyos
爱笑的眼睛111 天前
HarmonyOS 应用开发:深入剖析声明式 UI 状态管理及其最佳实践
华为·harmonyos
SmartBrain1 天前
DeerFlow实践:华为LTC流程的评审智能体设计
华为·语言模型
猫林老师1 天前
HarmonyOS多媒体开发:音视频播放与录制全解析
华为·音视频·harmonyos
程序员潘Sir1 天前
鸿蒙应用开发从入门到实战(四):ArkTS 语言概述
harmonyos·鸿蒙
爱笑的眼睛111 天前
HarmonyOS 应用开发深度解析:基于 ArkTS 的现代化状态管理实践
华为·harmonyos
娅娅梨1 天前
HarmonyOS-ArkUI Web控件基础铺垫7-HTTP SSL认证图解 及 Charles抓包原理 及您为什么配置对了也抓不到数据
http·华为·ssl·harmonyos