鸿蒙Next-Grid布局

牧羊人_sj

已于 2024-03-17 22:20:02 修改

阅读量191

点赞数 3

分类专栏：鸿蒙文章标签：鸿蒙

于 2024-03-15 22:46:11 首次发布

本文链接：https://blog.csdn.net/qq_59347596/article/details/136751518

版权

鸿蒙专栏收录该内容

8 篇文章 0 订阅

订阅专栏

鸿蒙中的Grid布局类似于前端中的栅格布局

4.0 Grid 文档中心

在Grid组件中只能放GridItem组件

@Entry
@Component
struct GridCase {
  build() {
    Grid() {
      GridItem() {
        GridCaseItem()
      }
      GridItem() {
        GridCaseItem()
      }
      GridItem() {
        GridCaseItem()
      }
      GridItem() {
        GridCaseItem()
      }
    }
    .width('100%')
    .height('100%')
    .columnsTemplate('1fr 1fr')  //设置文本 放置两列
    .columnsGap(10) //每列的距离
    .rowsGap(10)  // 每行的距离
    .padding(10)

  }
}

// 组件名唯一 不然会报错
@Component
struct GridCaseItem {
  build() {
    Row() {
      Column() {
        Text('南店')
          .fontSize(30)
          .fontColor(Color.White)

      }
      .width('100%')
    }
    .height(210)
    .borderRadius(4)
    .backgroundColor(Color.Orange)
  }
}