zoukankan      html  css  js  c++  java
  • 鸿蒙的js开发部模式16:鸿蒙布局Grid网格布局的应用一

    鸿蒙入门指南,小白速来!从萌新到高手,怎样快速掌握鸿蒙开发?【课程入口】

    目录:
    1.Grid简介
    2.使用Grid布局实现的效果
    3.grid-row-gap和grid-colunm-gap属性
    4.《鸿蒙的js开发模式》系列文章合集

    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 {
         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;
         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 {
         100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 88%  12%;
    }
    .contentview{
         100%;
        height: 100%;
        border: 5px  solid  powderblue;
    }
    .bottomview{
         100%;
        height: 100%;
        border: 5px  solid  cadetblue;
        display: grid;
        grid-template-columns: 1fr  1fr 1fr 1fr;
        grid-template-rows: 100%;
    }
    .box{
         100%;
        height: 100%;
        border: 8px  solid  green;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 70%  30%;
    
    }
    .boximg{
         80%;
        height: 100%;
       /** border:2px  solid  red;**/
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .boxtxt{
         100%;
        height: 100%;
       /** border:2px  solid  blue;**/
        display: flex;
        justify-content: center;
    }
    .topimg{
         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 {
        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{
    
         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开发。

    作者:六合李欣
    想了解更多内容,请访问: 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

  • 相关阅读:
    Rotation Kinematics
    离职 mark
    PnP 问题方程怎么列?
    DSO windowed optimization 代码 (4)
    Adjoint of SE(3)
    IMU 预积分推导
    DSO windowed optimization 代码 (3)
    DSO windowed optimization 代码 (2)
    OKVIS 代码框架
    DSO windowed optimization 代码 (1)
  • 原文地址:https://www.cnblogs.com/HarmonyOS/p/14435225.html
Copyright © 2011-2022 走看看