在HarmonyOS NEXT 中 TextInput clearButton 位置问题的解决方法？

Question

在HarmonyOS NEXT 中 TextInput clearButton 位置问题的解决方法？

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

目前textInput的cancelButton暂时不支持调整间距此场景可以通过自定义组件实现，以下是参考Demo：

@Entry 
@Component 
struct TextInputExample { 
  @State text: string = '' 
  @State changeType:InputType = InputType.Number 
  controller: TextInputController = new TextInputController() 
  build() { 
    Column() { 
      Flex({direction: FlexDirection.Row}){ 
        Stack(){ 
          TextInput({ text: this.text, controller: this.controller }) 
            .type(this.changeType) 
            .placeholderFont({ size: 16, weight: 400 }) 
            .width('100%') 
            .height(56) 
            .onChange((value: string) => { this.text = value }) 
          Image($r('app.media.startIcon')) 
            .margin({ left: 290 }) 
            .width(20) 
            .height(20) 
            .onClick(() =>{ 
              this.text = '' 
            }) 
        } 
      } 
    }.width('100%').height('100%').backgroundColor('#F1F3F5') } }