鸿蒙next,harmony next的组件WaterFlow就是瀑布流组件，官方也有相关示例，但是并没有给出自动计算图片高度，下面是通过Image的onComplete计算出图片的宽高，集合WaterFlow组件实现瀑布流效果。先看下效果：
首先是列表代码：
WaterFlow({
footer: this.itemFoot
}) {
FlowItem() {
PictureItem({
src: 'http://www.5imoban.net/uploadfile/2023/1105/20231105230401114.jpg'
})
}.width('100%')
FlowItem() {
PictureItem({
src: 'http://www.5imoban.net/uploads/230131/d1-14021911324TU.jpg'
})
}.width('100%')
FlowItem() {
PictureItem({
src: 'http://www.5imoban.net/uploadfile/2023/1207/20231207173151367.png'
})
}.width('100%')
FlowItem() {
PictureItem({
src: 'http://www.5imoban.net/uploadfile/2022/1205/20221205135838304.jpg'
})
}.width('100%')
FlowItem() {
PictureItem({
src: 'http://www.5imoban.net/uploadfile/2023/0713/20230713135511528.png'
})
}.width('100%')
}.layoutWeight(1)
.layoutDirection(FlexDirection.Column)
.columnsTemplate("1fr 1fr")
.columnsGap(10)
.rowsGap(5)
.width('100%')下面是PictureItem组件代码：
@Component
export default struct PictureItem {
@Prop src:string = ''
@State imgHeight:number|string = '132vp'
private itemW = 160
// 根据图片的真实尺寸，以及显示的宽度，计算出图片的显示高度
private calcImgHeight(w:number, h:number) {
this.imgHeight = this.itemW/(w/h)
}
build() {
Column(){
Image(this.src ?? $r('app.media.loading'))
.width(this.itemW)
.height(this.imgHeight)
.borderRadius(5)
.objectFit(ImageFit.Fill)
.onComplete((e) => {
// onComplete返回了图片的真实尺寸
this.calcImgHeight(e ? e.width : this.itemW, e ? e.height : this.itemW)
})
Text('姆巴佩又一次送别了莱万英格兰比赛难看到让球…').maxLines(1).textOverflow({
overflow: TextOverflow.Ellipsis
}).fontSize(14).margin({
top: 10
}).width(this.itemW)
Row(){
Text('新华网').fontSize(12).fontColor('#999').padding({
top: 2,
bottom: 2,
left: 5,
right: 5
}).borderRadius(90)
.backgroundColor('#f2f3f5')
Text('09-19').fontSize(12).fontColor('#999')
}.justifyContent(FlexAlign.SpaceBetween).width(this.itemW).margin({
bottom: 10,
top: 10
})
}.width('100%')
}
}