TextInput组件能根据输入内容改成动态长度吗?

当前UI效果图需要输入框居中显示,且需要根据输入内容居中向左右延伸,背景长度跟着一起变。 该如何设计编写?

HarmonyOS
2024-09-23 11:42:00
690浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
zxjiu

根据内容长度动态设置输入框长度,参照代码:

@State inputText: string = '';  
@State inputWidth: number = 350;  
controller: TextInputController = new TextInputController()  
build() {  
  Row() {  
    Column() {  
      TextInput({placeholder:'请输入文本',text:$$this.inputText,controller:this.controller})  
        .width(this.inputWidth+'px')  
        .onChange(()=>{  
          if(this.controller.getTextContentRect().width>200){  
            this.inputWidth = this.controller.getTextContentRect().width+150  
          }  
          else{  
            this.inputWidth = 350  
          }  
        })  
    }  
    .width('100%')  
  }  
  .height('100%')  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
分享
微博
QQ
微信
回复
2024-09-23 17:09:28
相关问题
HarmonyOS TextInput输入内容限制
1402浏览 • 1回复 待解决
HarmonyOS TextInput如何阻止其输入内容
1194浏览 • 1回复 待解决
HarmonyOS hilog输入内容过长
764浏览 • 1回复 待解决
如何监听输入输入内容的变化?
1289浏览 • 1回复 待解决
如何过滤textinput组件内容
1213浏览 • 1回复 待解决
TextInput怎么输入中文
4009浏览 • 0回复 待解决
TextInput组件输入状态下隐藏光标
2261浏览 • 1回复 待解决