HarmonyOS List如何将初始渲染位置设置为底部对齐

List目前默认渲染是从首个元素渲染，实际需求是显示最后的几个item底部对齐。目前是通过滑动实现，但是有图片等场景由于有主线程耗时，会有明显的滑动感知到体验不好。如果不通过滑动默认就显示底部元素。

HarmonyOS

Heiang

2025-01-09 17:34:19

浏览

回答 1

按赞同

按时间

zbw_apple

参考示例如下：

@Entry
@Component
struct Chat {
  // 这个列表代表聊天内容，每次发送和接收消息时，把聊天内容加入这个列表
  // 当监听到列表发生变化时，执行函数scrollerBottom，把list滑动到最底部
  @State @Watch('scrollerBottom') list: ResourceStr[] = ['1', '2', '3', '4', '5', '6', '7']
  scroller: Scroller = new Scroller()

  scrollerBottom() {
    this.scroller.scrollEdge(Edge.Bottom)
  }

  build() {
    Column() {
      // initialIndex代表列表生成时，从第几个索引值开始展示，选择最后一个索引值，就实现了显示最底部的消息
      // scroller代表绑定滚动事件，配合list监听，实现发送和接收消息，都能滚动到最底部
      List({ initialIndex: this.list.length - 1, scroller: this.scroller }) {
        ForEach(this.list, (item: string) => {
          ListItem() {
            Text(item)
              .width("100%")
              .height("50vp")
              .textAlign(TextAlign.Center)
              .fontSize("15fp")
              .fontColor("#333333")
          }
        })
      }
      .cachedCount(5)
      .backgroundColor("#f5f5f5")
      .layoutWeight(1)
      .width('100%')

      Text("添加数据")
        .width("100%")
        .height("80vp")
        .backgroundColor("#eeeeee")
        .fontSize("18fp")
        .onClick(() => {
          this.list.push("100")
        })
    }
    .width("100%")
    .height("100%")
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.