HarmonyOS 鸿蒙Next 有没有多行显示的 Text 组件?

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 有没有多行显示的 Text 组件?

可以显示多行文本,  不需要编辑功能

如果内容超过显示框, 有侧边滚动条,  可以上下滚动

就像是 C# 中的 ListBox组件

Harmonyos Next教程
5 回复

可以用TextArea，设置maxLines时文本超出可滚动显示，不想出现编辑态可以设置点击的时候stopEditing

controller: TextAreaController = new TextAreaController()

TextArea({controller: this.controller, text: ‘This is the text with the height adaptive policy set.This is the text with the height adaptive policy set’})
.width(‘80%’).height(90).borderWidth(1).margin(1)
.fontSize(24)
.maxLines(3)
.heightAdaptivePolicy(TextHeightAdaptivePolicy.MAX_LINES_FIRST)
.onClick(() => {
this.controller.stopEditing()
})

基上可以实现. 还差一点: 就是 如何, 每增加一行, 自动 滚动到底部? 是否可以, 向 TextArea 组件, 发送 ScrollDwon 之类的 消息?

还有一种方法，用Scroll包裹Text，当文本发生变化时Scroller滚动到底部

参考

[@Entry](/user/Entry)
[@Component](/user/Component)
struct indexPage {
  [@State](/user/State) message: string = 'This is the text with the height adaptive policy set.This is the text with the height adaptive policy set'
  scroller: Scroller = new Scroller()

build() {
Column({ space: 10 }) {
Scroll(this.scroller) {
Text(this.message)
.fontSize(20)
.onAreaChange((oldValue: Area, newValue: Area) => {
if (newValue.height > oldValue.height && oldValue.height != 0) {
this.scroller.scrollEdge(Edge.Bottom)
}
})
}


  Button(<span class="hljs-string">'add message'</span>)
    .onClick(() =&gt; {
      <span class="hljs-keyword">this</span>.message = <span class="hljs-keyword">this</span>.message.concat(<span class="hljs-string">'add one line and scroll to end'</span>)
    })
}
.width(<span class="hljs-string">'100%'</span>)
.height(<span class="hljs-string">'100%'</span>)

}
}

HarmonyOS 鸿蒙Next 有多行显示的 Text 组件。

在HarmonyOS鸿蒙Next系统中，Text组件支持多行显示。Text组件的默认行为是自动折行以适应内容，因此你无需进行额外的配置即可实现多行文本的显示。

若需要更精细地控制Text组件的多行显示行为，你可以使用maxLines属性来设置文本的最大行数。如果文本内容超过了指定的最大行数，你可以通过textOverflow属性来指定文本的截断方式，如使用省略号来表示被截断的文本部分。

此外，Text组件还支持其他丰富的文本样式和布局属性，如字体大小、颜色、对齐方式、行高等，这些属性可以帮助你更好地定制Text组件的外观和布局。

综上所述，HarmonyOS鸿蒙Next系统的Text组件支持多行显示，并且提供了丰富的属性来满足不同的文本展示需求。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html

回到顶部