#鸿蒙学习大百科#GridRow如何适配sm,md,lg三种尺寸的设备?

GridRow如何适配sm,md,lg三种尺寸的设备?


HarmonyOS
2024-09-25 10:34:39
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
福娃泡泡
@Entry
@Component
struct Index {
  @State bgColors: Color[] =
    [Color.Red, Color.Orange, Color.Yellow, Color.Green, Color.Pink, Color.Grey, Color.Blue, Color.Brown]
  build() {
    Column() {
      GridRow({
        columns: {
          //GridRow在sm设备中占4个格栅,在md设备中占8个格栅,在lg设备中占12个格栅
          sm: 4,
          md: 8,
          lg: 12
        },
      }) {
        ForEach(this.bgColors, (color: Color, index?: number | undefined) => {
          //每个Item在各种设备中都占有2个格栅
          GridCol({
            span: {
              sm: 2,
              md: 2,
              lg: 2
            }
          }) {
            Row() {
              Text(`${index}`)
            }.width('100%').height('50vp')
          }
          .backgroundColor(color)
        })
      }.backgroundColor(Color.White)
      .height("100%")
    }
    .height('100%')
    .width('100%')
  }
}

在sm设备中,2个item占满一行。

在md设备中4个item占满一行。

在lg设备中6个item占满1行。

分享
微博
QQ
微信
回复
2024-09-25 15:41:46
相关问题
视频进度滑动条三种实现方式
1457浏览 • 1回复 待解决