鸿蒙布局：Grid

最新推荐文章于 2024-08-25 20:51:18 发布

jian11058

最新推荐文章于 2024-08-25 20:51:18 发布

阅读量187

点赞数 2

文章标签：鸿蒙

本文链接：https://blog.csdn.net/jian11058/article/details/140878822

版权

效果：

代码：

占比代码： .columnsTemplate("1fr 1fr")//设置2列，占比为：1:1

@Entry
@Component
struct GridCase {

  build() {
    Grid(){
      //grid布局会出现滚动条
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
      GrideItemCase()
    }
    .width("100%")
    .height("100%")
    .columnsTemplate("1fr 1fr")//设置2列，占比为：1:1
    .columnsGap(10)
    .rowsGap(10)
    .padding(10)
  }
}

@Component
struct GrideItemCase {
  build() {
    GridItem(){
      Row(){
        Column(){
          Text("内容")
        }
        .width('100%')
      }
      .width('100%')
      .height('200')
      .backgroundColor(Color.Pink)
    }
  }
}