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

③效果如下:

相关推荐
爱笑的眼睛1125 分钟前
HarmonyOS语音识别与合成:构建智能语音应用的深度指南
华为·harmonyos
阿里云云原生1 小时前
从“天书”到源码:HarmonyOS NEXT 崩溃堆栈解析实战指南
harmonyos
安卓开发者2 小时前
鸿蒙Next的AVSession Kit:重塑音视频播控的开发体验
华为·音视频·harmonyos
哦***72 小时前
华为FreeBuds 7i空间音频不灵敏怎么办?
华为·音视频
鸿蒙小白龙3 小时前
鸿蒙openharmony操作系统LiteOS-A内核技术全解析:架构、性能与开发实践
华为·架构·harmonyos·鸿蒙·鸿蒙系统·open harmony
2503_928411566 小时前
10.23 @Observed深层监听
华为·harmonyos·鸿蒙
KongHen7 小时前
UTS编写字符串编解码/加密插件(安卓及鸿蒙端)
前端·harmonyos
做运维的阿瑞7 小时前
鸿蒙6.0技术解析:五大行业迎来的智能化革命
人工智能·harmonyos
鸿蒙Jy7 小时前
一篇文章带你理解什么是鸿蒙开发中V1&&V2装饰器
harmonyos
SunkingYang7 小时前
C++变量与函数命名规范技术指南 (基于华为编码规范与现代C++最佳实践)
c++·华为·编码规范·命名规则·命名规范·函数名字·成员变量