鸿蒙使用响应式渲染列表

介绍

媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。
2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

现在我们先准备数据源

定义类型

interface MovieItem {
  title: string
  img: ResourceStr
}

准备数据源

items: MovieItem[] = [
  { title: '电影标题1', img: $r('app.media.ic_video_grid_1') },
  { title: '电影标题2', img: $r('app.media.ic_video_grid_2') },
  { title: '电影标题3', img: $r('app.media.ic_video_grid_3') },
  { title: '电影标题4', img: $r('app.media.ic_video_grid_4') },
  { title: '电影标题5', img: $r('app.media.ic_video_grid_5') },
  { title: '电影标题6', img: $r('app.media.ic_video_grid_6') },
  { title: '电影标题7', img: $r('app.media.ic_video_grid_7') },
  { title: '电影标题8', img: $r('app.media.ic_video_grid_8') },
  { title: '电影标题9', img: $r('app.media.ic_video_grid_9') },
  { title: '电影标题10', img: $r('app.media.ic_video_grid_10') },
]

使用断点查询工具类，及全局变量

breakSystem:BreakpointSystem=new BreakpointSystem()
@StorageProp(BreakpointKey) point:string='sm'

静态结构

Grid() {
  ForEach(this.items, (item: MovieItem) => {
    GridItem() {
      Column({ space: 10 }) {
        Image(item.img)
          .borderRadius(10)
        Text(item.title)
          .width('100%')
          .fontSize(20)
          .fontWeight(600)

      }
    }
  })
}

.columnsTemplate(new BreakPointType({
  xs:'1fr 1fr',
  sm:'1fr 1fr',
  md:'1fr 1fr 1fr',
  lg:'1fr 1fr 1fr 1fr'
  }).getValue(this.point))
.rowsGap(10)
.columnsGap(10)
.padding(10)

lg

md

xm

sm