OpenHarmony实战开发-如何实现栅格布局

最新推荐文章于 2024-07-07 20:58:08 发布

码牛程序猿

最新推荐文章于 2024-07-07 20:58:08 发布

阅读量696

点赞数 8

分类专栏：鸿蒙工程师鸿蒙 HarmonyOS 文章标签： harmonyos 华为鸿蒙应用开发 OpenHarmony 鸿蒙系统鸿蒙开发 HarmonyOS

本文链接：https://blog.csdn.net/2401_82546228/article/details/138352328

版权

栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。

创建grid-container组件

在pages/index目录下的hml文件中创建一个grid-container组件，并添加Grid-row子组件。

<!-- index.hml -->
<div class="container">
  <grid-container id="mygrid" gutter="20px" style="background-color: pink;">
    <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left: 
      10%;"></grid-row>
    <grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
    <grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
  </grid-container>
</div>

/* xxx.css */
.container{
   
  flex-direction: column;
  background-color: #F1F3F5;
  margin-top: 500px;
  justify-content: center;
  align-items: center;
}

在这里插入图片描述

说明： grid-container仅支持grid-row为子组件。

调用方法

grid-container点击组件调用getColumns、getColumnWidth、getGutterWidth方法，返回栅格容器列数、column宽度及gutter宽度。长按调用getSizeType方法返回当前容器响应尺寸类型（xs|sm|md|lg）。

<!-- index.hml -->
<div class="container">
  <grid-container id="mygrid" gutter="20px" style="background-color: pink;padding-top: 100px;" 
    onclick="getColumns" onlongpress="getSizeType">
    <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: 
      40%;"></grid-row>
    <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
      25%;"></grid-row>
    <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: 
      10%;"></grid-row>
    <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
  </grid-container