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

②效果如下


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

相关推荐
哈__17 分钟前
React Native 鸿蒙跨平台开发:LayoutAnimation 实现鸿蒙端表单元素的动态添加动画
react native·react.js·harmonyos
小雨下雨的雨29 分钟前
Flutter 框架跨平台鸿蒙开发 —— ListView 控件之高效列表渲染艺术
flutter·华为·harmonyos
行者9639 分钟前
Flutter在OpenHarmony平台的文件上传组件深度实践
flutter·harmonyos·鸿蒙
行者9642 分钟前
Flutter跨平台开发适配OpenHarmony:进度条组件的深度实践
开发语言·前端·flutter·harmonyos·鸿蒙
奋斗的小青年!!1 小时前
Flutter适配OpenHarmony:打造无缝国际化用户体验的实战指南
flutter·harmonyos·鸿蒙
奋斗的小青年!!1 小时前
Flutter跨平台数据筛选器:深度适配OpenHarmony实战指南
flutter·harmonyos·鸿蒙
哈__1 小时前
React Native 鸿蒙跨平台开发:Animated 实现鸿蒙端组件的上下滑动入场动画
react native·react.js·harmonyos
奋斗的小青年!!2 小时前
Flutter与OpenHarmony深度协同:SnackBar组件的跨平台适配实战
flutter·harmonyos·鸿蒙
行者962 小时前
OpenHarmony Flutter跨平台开发:树形视图组件的实践与性能优化
flutter·性能优化·harmonyos·鸿蒙
wszy180911 小时前
新文章标签:让用户一眼发现最新内容
java·python·harmonyos