HarmonyOS 鸿蒙Next Text实现scroll效果

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

HarmonyOS 鸿蒙Next Text实现scroll效果

需要使用eTs实现text段落在固定height中可以有scroll效果。

Scroll(this.scroller) {
  Column() {
    Text("This text box is scrollable thanks to being situated inside a nested scroll view. That makes it scrollable regardless of the scrolling of the content of the entire screen, which can be scrolled independently.
The point here is to demonstrate how the over-scroll effect can work in the presence of nested scroll-views, provided it is applied over the parent (root) view, regardless of having inner nested scroll-views as children.
In this demo, the root view is merely a ScrollView, and therefore applying the effect over it is straightforward (i.e. using the OverScrollHelper).")
      .width("100%").height("100%").textOverflow({ overflow: TextOverflow.None })
      .fontSize(22).fontWeight(600).fontColor("#727171")
  }.padding(14).width("100%").height(200)
}.scrollBar(BarState.Off)

上述代码子组件的height明显大于父组件，但是没有滚动效果。


更多关于HarmonyOS 鸿蒙Next Text实现scroll效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

问题已解决，在外面再嵌套一层布局，设置height就行了

Column() {
  Scroll(this.scroller) {
    Flex() {
      Text("This text box is scrollable thanks to being situated inside a nested scroll view. That makes it scrollable regardless of the scrolling of the entire screen, which can be scrolled independently.
The point here is to demonstrate how the over-scroll effect can work in the presence of nested scroll-views, provided it is applied over the parent (root) view, regardless of having inner nested scroll-views as children.
In this demo, the root view is merely a ScrollView, and therefore applying the effect over it is straightforward (i.e. using the OverScrollHelper).")
        .fontSize(22)
        .fontWeight(600)
        .fontColor("#727171")
    }.padding(14).width("100%")
  }.scrollBar(BarState.Off)
}.width("100%").height(200)

更多关于HarmonyOS 鸿蒙Next Text实现scroll效果的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


欢迎开发小伙伴们进来帮帮楼主

在HarmonyOS中实现Next Text的scroll效果，可以通过使用ScrollView组件来包裹你的文本组件。ScrollView允许内容在垂直或水平方向上滚动。以下是一个简单的示例，展示如何在HarmonyOS中实现文本滚动效果：

  1. 布局文件（XML）： 在你的布局文件中，添加一个ScrollView，并在其内部添加一个Text组件。确保ScrollView的宽高设置为匹配父容器，同时设置Text组件的内容足够长以触发滚动效果。
<ScrollView
    ohos:width="match_parent"
    ohos:height="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:text"
        ohos:width="match_parent"
        ohos:height="wrap_content"
        ohos:text="这是一个很长的文本，用于展示滚动效果。文本内容足够长，以便用户可以通过滚动查看全部内容。" />
</ScrollView>
  1. Activity或Ability文件： 在你的Activity或Ability文件中，无需额外代码即可实现滚动效果，因为滚动是由用户交互触发的。

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

回到顶部