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

③效果如下:

相关推荐
爱笑的眼睛115 小时前
我的HarmonyOS百宝箱
华为·harmonyos
2501_919749035 小时前
鸿蒙:创建公共事件、订阅公共事件和退订公共事件
华为·harmonyos
我是华为OD~HR~栗栗呀6 小时前
华为od-21届考研-C++面经
java·c语言·c++·python·华为od·华为·面试
安防视频中间件/视频资源汇聚平台7 小时前
华为结构化摄像机接入到SVMSPro平台操作流程
华为·信息可视化·实时音视频·svmspro
颜颜yan_10 小时前
HarmonyOS 6 ArkUI框架实战:文本展开折叠组件开发详解
华为·harmonyos·arkui
Industio_触觉智能11 小时前
开源鸿蒙6.1和8.1版本被确定为LTS建议版本,最新路标正式发布!-转自开源鸿蒙OpenHarmony社区
harmonyos·openharmony·开源鸿蒙
●VON12 小时前
重生之我在大学自学鸿蒙开发第五天-《实战篇》
学习·华为·云原生·harmonyos·鸿蒙
饮马长城窟13 小时前
华为Asend NPU 大模型W8A8量化调优
华为
文火冰糖的硅基工坊14 小时前
[嵌入式系统-114]:华为的操作系统:鸿蒙操作系统(HarmonyOS)和欧拉操作系统(openEuler)
科技·华为·架构·harmonyos
岸芷漫步15 小时前
鸿蒙应用中的页面跳转分析
harmonyos