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

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

HarmonyOS
2024-09-23 11:42:00
浏览
收藏 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%')  
}
分享
微博
QQ
微信
回复
2024-09-23 17:09:28
相关问题
如何监听输入输入内容的变化?
286浏览 • 1回复 待解决
如何过滤textinput组件内容
306浏览 • 1回复 待解决
TextInput组件输入状态下隐藏光标
1142浏览 • 1回复 待解决
TextInput怎么输入中文
2867浏览 • 0回复 待解决
如何根据组件内容大小修改浮动窗口
1703浏览 • 1回复 待解决
TextInput如何禁止输入emoj表情
349浏览 • 1回复 待解决
HarmonyOS如何测量文本内容长度
14浏览 • 0回复 待解决