HarmonyOS 鸿蒙Next 试了很多次TextArea组件不能滚动，是BUG？
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) // 滚动条宽度
当输入文字超过文字框时没有滚动条出现，改变高度也不行，有碰到这种情况的吗？
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) => {
</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>
