鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一 原创 精华

六合李欣
发布于 2021-2-23 08:37
浏览
2收藏

1.目前鸿蒙css布局方案中,除了Flex布局 ,网格布局Grid可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。

容器里面的水平区域称为“行”,垂直区域称为“列”,行列重叠出来的空间组成单元格

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

划分网格的线,称为”网格线“

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

黄色的代表是列的网格线,绿色代表的是行的网格线。Grid和flex类似,布局的属性都是分为两类,一类定义在容器上,称为容器属性,一类定义在项目上,称为项目属性。

 

display属性
display:grid指定一个容器为网格布局,

<div class="container">
   <div  class="item">
   </div>
    <div  class="item">
    </div>
    <div  class="item">
    </div>

    <div  class="item">
    </div>
    <div  class="item">
    </div>
    <div  class="item">
    </div>
</div>
.container {
    width: 100%;
    display: grid;  /**采用grid布局**/
    background-color: palevioletred;
   /** grid-template-columns: 100px  200px  300px;
    grid-template-rows: 200px  200px;**/
    grid-template-columns: 1fr  1fr  1fr;
    grid-template-rows: 200px  300px ;
}
.item
{
    border: 5px  solid   white;
    width: 100%;
    height: 100%;

}

 

布局效果如下:

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

特别注意

grid-template-columns和 grid-template-rows
grid-template-columns:用来指定行的宽度

grid-template-rows:用来指定行的高度

 

 

  1.1也可以使用百分比来表示

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

1.2 网格提供了fr关键字(fraction的缩写,意为“片段”),如果两列的宽度分别为1fr和2fr,就表示后者是前者的2倍

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

1.3 可以使用具体的像素单位。

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

 

2.使用Grid布局构建底部菜单栏和整体页面的分割控制,实现的效果如下:

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

 

2.1页面视图部分代码:

<div class="container">
    <div  class="contentview">

    </div>
    <div class="bottomview">
       <block  for="{{menus}}">
          <div  class="box">
              <div  class="boximg">
                 <image   class="topimg" src="{{$item.path}}"></image>
              </div>
              <div class="boxtxt">
                  <text>{{$item.name}}</text>
              </div>
          
          </div>
       
       </block>
    </div>
</div>

 

2.2 业务逻辑js代码,数据构建

export default {
    data: {
        title: 'World',
        menus:[{"name":"首页","path":"common/fs.png"},{"name":"分类","path":"common/cs.png"},
               {"name":"旅游","path":"common/ls.png"},{"name":"我的","path":"common/ms.png"}]
    }
}

 

2.3 css采用 Grid布局,

.container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 88%  12%;
}
.contentview{
    width: 100%;
    height: 100%;
    border: 5px  solid  powderblue;
}
.bottomview{
    width: 100%;
    height: 100%;
    border: 5px  solid  cadetblue;
    display: grid;
    grid-template-columns: 1fr  1fr 1fr 1fr;
    grid-template-rows: 100%;
}
.box{
    width: 100%;
    height: 100%;
    border: 8px  solid  green;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 70%  30%;

}
.boximg{
    width: 80%;
    height: 100%;
   /** border:2px  solid  red;**/
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxtxt{
    width: 100%;
    height: 100%;
   /** border:2px  solid  blue;**/
    display: flex;
    justify-content: center;
}
.topimg{
    width: 65px;
    height: 65px;

}

 这个是Grid布局构建底部菜单栏的具体实现,可以和Flex布局做个技术的对比。

 

 

3.grid-row-gap和grid-colunm-gap属性

grid-row-gap:设置行与行之间的间隔

grid-colunm-gap:设置列于列之间的间隔

grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap

<div class="container">
    <div class="item1">
        <text>1</text>
    </div>
    <div class="item1">
        <text>2</text>
    </div>
    <div class="item1">
        <text>3</text>
    </div>
    <div class="item1">
        <text>4</text>
    </div>
    <div class="item1">
        <text>5</text>
    </div>
    <div class="item1">
        <text>6</text>
    </div>
</div>
.container {
    width:100%;
    background-color: #f3f3f3;
    display: grid;
    grid-template-columns: 33% 33% 33%;
    grid-template-rows: 200px 300px ;
    grid-columns-gap: 20px;
    grid-rows-gap: 20px;
}
.item1{

    width: 100%;
    height: 100%;
    border:1px solid #fff;
    color:#fff;
    font-weight: bold;
    background-color: powderblue;
    display: flex;
    justify-content: center;
    align-items: center;


}

 

设置间隔效果如下:

鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一-鸿蒙开发者社区

 

Grid布局和Flex布局在鸿蒙,PC,小程序都有非常广泛的应用,也是布局标准,入门的同学,可以选择从这里起步,能够够好的掌握鸿蒙的应用开发,然后在切入到鸿蒙的Java开发。

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2021-2-23 08:38:56修改
8
收藏 2
回复
举报
7条回复
按时间正序
/
按时间倒序
张荣超_九丘教育
张荣超_九丘教育

好文👍👍👍

回复
2021-2-23 08:54:41
魔法少女郭德纲
魔法少女郭德纲

楼主写的非常仔细,收藏了

回复
2021-2-23 08:58:49
wx601cb5b0b658d
wx601cb5b0b658d

支持一下

回复
2021-2-23 09:41:29
软通田可辉
软通田可辉

优秀,学习了

回复
2021-2-23 09:41:59
Whyalone
Whyalone

可以当作教程了

回复
2021-2-23 10:26:43
六合李欣
六合李欣

谢谢大家的支持!一起努力!

回复
2021-2-23 14:47:20
wx601cb5b0b658d
wx601cb5b0b658d

grid-gap 这种合并简写的方式好像目前来说是不支持的

 

 

回复
2021-2-23 15:22:53
回复
    相关推荐