操作步骤:
1、声明一个变量,如下:
@State amountText : string = ""
2、在组件中使用以上变量,如下:
Row() {
// 图标
Column() {
Image($r('app.media.icon_dollar'))
.width('24vp')
.height('24vp')
.fillColor($r('app.color.icon_label'))
}
.justifyContent(FlexAlign.Center)
// 输入
TextInput({ text: this.amountText, placeholder: "0.00" })
.flexShrink(1)
.placeholderColor($r('app.color.placeholder'))
.fontColor($r('app.color.text_highlight'))
.fontSize($r('app.float.fontsize_big'))
.backgroundColor($r('app.color.background_highlight'))
.type(InputType.NUMBER_DECIMAL)
.onChange((value: string) => {
if (value.length == 0) {
return
}
this.amount = Number(value)
})
}
.width('90%')
.height('80vp')
.backgroundColor($r('app.color.background_highlight'))
.border({ radius: $r('app.float.radius_edit') })
.padding({ left: 10 })
3、手动输入数字后,再执行this.amountText='';无法及时更新TextInput组件。
上述代码需要$$进行双向同步,TextInput\(\{ text: $$this.amountText, placeholder: “0.00” }) ,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-two-way-sync-V5