HarmonyOS【ArkUI组件--TextInput】

1.文本输入框基本用法

2. 使用文本输入框组件(如何实现输入数字改变图片大小)

在此博客的基础上继续编写:HarmonyOS【ArkUI组件--Text】-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)
          })
      }

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

②效果如下


关于博客有任何问题欢迎咨询 ,看见就回😊

相关推荐
万少1 天前
HarmonyOS6 接入分享,原来也是三分钟的事情
前端·harmonyos
梧桐ty1 天前
解耦之道:鸿蒙+Flutter混合工程的微内核架构与模块化实战
flutter·华为·harmonyos
Archilect1 天前
HarmonyOS ArkTS 倒计时组件实战:性能优化篇 - 从100ms刷新到流畅体验
harmonyos
Archilect1 天前
HarmonyOS ArkTS 倒计时组件实战:高级特性篇 - 时间区间样式切换的动态配置系统
harmonyos
梧桐ty1 天前
鸿蒙+Flutter混合工程化:构建、依赖管理与持续集成实战
flutter·华为·harmonyos
少一倍的优雅1 天前
hi3863(WS63) 智能小车 (一) 简单介绍
单片机·嵌入式硬件·harmonyos·hi3863
卡奥斯开源社区官方1 天前
鸿蒙智行 L3 内测启幕:从技术架构到商用落地的全链路技术拆
华为·架构·harmonyos
搬砖的kk1 天前
Flutter UUID 鸿蒙平台适配实践 - 全版本测试与验证
flutter·华为·harmonyos
梧桐ty1 天前
硬件交互联动:基于鸿蒙的Flutter物联网应用开发实战
flutter·华为·harmonyos
鸿蒙小白龙2 天前
鸿蒙UniProton操作系统编译开发指导
harmonyos·鸿蒙系统·openharmony·uniproton