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

后续将开篇介绍如何修改及复用样式