ETS元件庫PandaUI之栅格布局元件PdRow、PdCol

基于API9，API8編譯會報未定義BuilderParams錯誤，也不知道是不允許，還是系統bug

栅格系統作為一種輔助布局的定位工具，在平面設計和網站設計都起到了很好的作用，對移動裝置的界面設計有較好的借鑒作用。

總結栅格系統對于移動裝置的優勢主要有：

1. 給布局提供一種可循的規律，解決多尺寸多裝置的動态布局問題。
2. 給系統提供一種統一的定位标注，保證各子產品各裝置的布局一緻性。
3. 給應用提供一種靈活的間距調整方法，滿足特殊場景布局調整的可能性。

PandaUI中栅格布局與官方栅格布局采用方案不同，PandaUI的栅格布局依賴Flex及Scroll容器元件，設定不同樣式以達到栅格化目的。

效果圖

DAYU200(屏寬：720)	DAYU200連接配接的顯示器(屏寬>1920)

demo界面代碼

為友善示範show的功能，DAYU200自帶觸屏上将最後一列的文字顯示略作更改，相關布局無修改

import { PdRow, PdCol, PdText, PdButton } from "@ohos/panda-ui"

@Entry
@Component
struct Index {
  build() {
    Column() {
      PdRow() {
        PdCol({span:24 ,options:{style:{"background-color":"#ccc","height":"30px"}}})
      }
      PdRow({options:{style:{"margin-top":"10px"}}}) {
        PdCol({span:12 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:10 ,mOffset:2,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
      }
      PdRow({options:{style:{"margin-top":"10px"}}}) {
        PdCol({span:8 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:8 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:8 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
      }
      PdRow({options:{style:{"margin-top":"10px"}}}) {
        PdCol({span:4 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:4 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:4 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:4 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:4 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
        PdCol({span:4 ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"PdCol",type:"primary"})
        }
      }

      PdRow({options:{style:{"margin-top":"10px"}}}) {
        PdCol({span:4,xs:{span:6}, xl:{span:2},options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"1",type:"primary"})
        }
        PdCol({span:4 ,xs:{span:6,offset:2}, xl:{span:2},options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"2",type:"primary"})
        }
        PdCol({span:4,xs:{show:false} , xl:{span:2,offset:4},options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"3",type:"primary"})
        }
        PdCol({span:4,xs:{span:10}, xl:{span:2} ,options:{style:{"background-color":"#ccc"}}}){
          PdButton({label:"4",type:"primary"})
        }
      }
    }.width("100%")
    .padding(0)
    .margin(0)
  }
}
           

通過代碼可以看出在不同螢幕尺寸下，會根據不同設定來進行布局。

相關屬性

PdRow設計時就為占滿父元件即width:100%,固無特殊屬性

PdCol

參數	說明	類型	可選值	預設值
span	栅格占據的列數	number	-	24
mOffset	栅格左側的間隔格數(因offset與系統參數沖突，退而采用mOffset)	number	-
push	栅格向右移動格數	number	-
pull	栅格向左移動格數	number	-
xs	<768px 響應式栅格數或者栅格屬性對象	{span?:number,offset?:number,show?:boolean}	-	-
sm	≥768px 響應式栅格數或者栅格屬性對象	{span?:number,offset?:number,show?:boolean}	-	-
md	≥992px響應式栅格數或者栅格屬性對象	{span?:number,offset?:number,show?:boolean}	-	-
lg	≥1200px響應式栅格數或者栅格屬性對象	{span?:number,offset?:number,show?:boolean}	-	-
xl	≥1920px響應式栅格數或者栅格屬性對象	{span?:number,offset?:number,show?:boolean}	-	-

該倉庫已開源至Git倉庫PandaUI

後續将開篇介紹如何修改及複用樣式