HarmonyOS 鸿蒙Next 试了很多次TextArea组件不能滚动，是BUG？

发布于 1周前 作者 bupafengyu 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 试了很多次TextArea组件不能滚动，是BUG？

代码如下：
Scroll(this.textareascroller){
Row(){
    TextArea({text:this.notepad}).width(‘100%’).backgroundColor(Color.White).borderRadius(5)
      .height(200)
      .onChange((value)=>{
        this.notepad=value
      })
      .onCopy((value)=>{
      })
}.width(‘96%’)
}.height(‘40%’)
.scrollBar(BarState.On)
      .scrollable(ScrollDirection.Vertical)// 滚动方向为垂直方向
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(6) // 滚动条宽度

当输入文字超过文字框时没有滚动条出现，改变高度也不行，有碰到这种情况的吗？

Harmonyos Next教程
3 回复

解决方案

获取输入的内容的长度，然后将光标通过接口caretPosition()将光标跳到最后一行，即可到最后一行。

代码示例

// xxx.ets
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TextAreaExample {
  [@State](/user/State) text: string = ''
  [@State](/user/State) positionInfo: CaretOffset = { index: 0, x: 0, y: 0 }
  controller: TextAreaController = new TextAreaController()
  [@State](/user/State) maxLength: number= 0

build() {
Column() {
TextArea({
text: this.text,
placeholder: ‘The text area can hold an unlimited amount of text. input your word…’,
controller: this.controller
})
.placeholderFont({ size: 16, weight: 400 })
.width(336)
.height(56)
.margin(20)
.fontSize(16)
.fontColor(’#182431’)
.backgroundColor(’#FFFFFF’)
.onChange((value: string) => {
let Length: number= value.length;
if(this.maxLength< Length){
this.maxLength = Length
console.log(‘length=’+this.maxLength)
}
this.text = value
})
Text(this.text)


  </span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">Button</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'跳转到最后一行'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">onClick</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">((event: ClickEvent) =&gt; {
    </span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.controller.caretPosition(</span></span><span class="hljs-keyword"><span class="hljs-function"><span class="hljs-params"><span class="hljs-keyword">this</span></span></span></span><span class="hljs-function"><span class="hljs-params">.maxLength)
  })</span></span></span><span class="hljs-function">
}.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">width</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'100%'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">height</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'100%'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">.</span><span class="hljs-title"><span class="hljs-function"><span class="hljs-title">backgroundColor</span></span></span><span class="hljs-params"><span class="hljs-function"><span class="hljs-params">(</span></span><span class="hljs-string"><span class="hljs-function"><span class="hljs-params"><span class="hljs-string">'#F1F3F5'</span></span></span></span><span class="hljs-function"><span class="hljs-params">)</span></span></span><span class="hljs-function">

}
}<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 8px; right: 8px; font-size: 14px;">复制</button>

不是光标不能自动到最后一行，是超过高度时不能出现滚动条，API8，10都模拟正常，就API9有问题

在HarmonyOS鸿蒙Next的API9中，TextArea组件通常应支持滚动功能，特别是在内容超出其显示区域时。如果TextArea组件无法滚动，这可能是由于组件布局设置或系统版本问题导致的。

请检查以下几点：

  1. 确保TextArea组件被正确放置在支持滚动的布局中，如Scroll组件。
  2. 检查TextArea组件的属性设置，如高度和宽度，确保它们没有限制滚动。
  3. 尝试在模拟器或真机上运行不同的测试案例，以排除特定设备或模拟器的问题。

如果问题依旧没法解决，请加我微信，我的微信是itying888，我可以进一步协助排查问题。

回到顶部