鴻蒙的js開發部模式16:鴻蒙佈局Grid網格佈局的應用一

鴻蒙入門指南,小白速來!從萌新到高手,怎樣快速掌握鴻蒙開發?【課程入口】css

目錄:
1.Grid簡介
2.使用Grid佈局實現的效果
3.grid-row-gap和grid-colunm-gap屬性
4.《鴻蒙的js開發模式》系列文章合集小程序

1.目前鴻蒙css佈局方案中,除了Flex佈局 ,網格佈局Grid能夠算得上是最強大的佈局方案了。它能夠將網頁分爲一個個網格,而後利用這些網格組合作出各類各樣的佈局。佈局

容器裏面的水平區域稱爲「行」,垂直區域稱爲「列」,行列重疊出來的空間組成單元格post

鴻蒙的js開發部模式16:鴻蒙佈局Grid網格佈局的應用一

劃分網格的線,稱爲」網格線「flex

鴻蒙的js開發部模式16:鴻蒙佈局Grid網格佈局的應用一

黃色的表明是列的網格線,綠色表明的是行的網格線。Grid和flex相似,佈局的屬性都是分爲兩類,一類定義在容器上,稱爲容器屬性,一類定義在項目上,稱爲項目屬性。url

display屬性
display:grid指定一個容器爲網格佈局,.net

<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%;

}

佈局效果以下:code

鴻蒙的js開發部模式16:鴻蒙佈局Grid網格佈局的應用一

特別注意blog

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開發。

做者:六合李欣
想了解更多內容,請訪問: 51CTO和華爲官方戰略合做共建的鴻蒙技術社區https://harmonyos.51cto.com

相關文章
相關標籤/搜索