HarmonyOS 鸿蒙Next 实现聊天页List子组件自下而上排列

一、内容反向排列（自下而上）

为了使List组件能够自上而下排列，且不改变数据的排列方向，我们可以使用 rotate 属性将外层容器整体旋转180°，再将子组件也旋转180°，即可实现反向排列的效果。

List(){
LazyForEach(this.messageSource, (data: V2NIMMessage, index)=>{
ListItem(){
MessageItem({
messageData: data,
upData: this.messageSource.getData(index>=this.messageSource.totalCount()-1?index:index+1)
})
}.rotate({angle: 180})
}, (data: V2NIMMessage)=>{ return JSON.stringify(data) })
}.height(this.listHeight)
.width(“100%”)
.rotate({angle: 180})

二、反向排列后List组件无法在没撑满的情况靠上对齐

在我们对List组件做了反转之后，默认情况下List组件是相对于屏幕下方进行布局的；但是很多情况下，比如微信登聊天页面，需要在未撑满list组件时，子组件向上对齐；对于这种情况，得出如下的解决方案。

实现这个效果，需要动态计算绘制区域的高度。

1. display.getDefaultDisplaySync().height 拿到屏幕高度

let windowHeight: number = px2vp(display.getDefaultDisplaySync().height);

1. 计算顶部高度 headHeight

let headHeight: number = 45 + WindowBar.getWindowBar().topHeight;

1. 计算底部高度 bottomHeight

let bottomHeight: number = WindowBar.getWindowBar().bottomHeight + 10 + 30

1. 计算画布高度 chatHeight

let chatHeight: number = windowHeight - headHeight - bottomHeight;

通过上方4步能够拿到当前画布的高度，然后我们需要计算出组件当前高度

1. 通过组件的 onAreaChange 事件，可以拿到属性重新绘制后的高度
2. 通过 Map 来根据每个子组件的唯一值来存储每个组件的高度

@State private newListHeight: Map<string, number> = new Map();

ListItem(){
…
}.rotate({angle: 180})
.onAreaChange((oldValue: Area, newValue: Area)=>{
this.newListHeight.set(data.messageServerId, newValue.height as number);
if ((index === this.messageSource.totalCount() || index > 25) && index <= 25) {
this.getHeight()
}
})

1. 遍历map，拿到组件总高度，初始的20是list组件开头和结尾的边距

let componentHeight: number = 20;
this.newListHeight.forEach((value)=>{
componentHeight += value;
})

1. 这时候我们就可以判断组件高度和画布高度的大小，从而选择使用哪个高度来绘制画布高度了

animateTo({duration: isAnimateTo?200:0},()=>{
this.listHeight = chatHeight > componentHeight ? componentHeight : chatHeight;
})

​