ETS组件库PandaUI之栅格布局组件PdRow、PdCol 原创 精华

panda_coder
发布于 2022-8-8 13:58
浏览
2收藏

基于API9,API8编译会报未定义BuilderParams错误,也不知道是不允许,还是系统bug

栅格系统作为一种辅助布局的定位工具,在平面设计和网站设计都起到了很好的作用,对移动设备的界面设计有较好的借鉴作用。
总结栅格系统对于移动设备的优势主要有:

  1. 给布局提供一种可循的规律,解决多尺寸多设备的动态布局问题。
  2. 给系统提供一种统一的定位标注,保证各模块各设备的布局一致性。
  3. 给应用提供一种灵活的间距调整方法,满足特殊场景布局调整的可能性。

PandaUI中栅格布局与官方栅格布局采用方案不同,PandaUI的栅格布局依赖Flex及Scroll容器组件,设置不同样式以达到栅格化目的。

效果图

DAYU200(屏宽:720) DAYU200连接的显示器(屏宽>1920)
ETS组件库PandaUI之栅格布局组件PdRow、PdCol-开源基础软件社区 ETS组件库PandaUI之栅格布局组件PdRow、PdCol-开源基础软件社区

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 - 0
push 栅格向右移动格数 number - 0
pull 栅格向左移动格数 number - 0
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
后续将开篇介绍如何修改及复用样式

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏 2
回复
举报
4条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

布局一致性确实非常重要,不过如果要展示的是图片,这样拉伸应该会对图片有很大的影响吧。

回复
2022-8-8 14:26:03
panda_coder
panda_coder 回复了 红叶亦知秋
布局一致性确实非常重要,不过如果要展示的是图片,这样拉伸应该会对图片有很大的影响吧。

PdRow和PdCol都是容器组件(但因为是自定义组件,不能作为最顶层组件),不会影像到图片组件的正常使用,图片的拉伸、裁切等和图片组件的属性设置相关,和容器组件关系不大

1
回复
2022-8-8 14:48:37
红叶亦知秋
红叶亦知秋 回复了 panda_coder
PdRow和PdCol都是容器组件(但因为是自定义组件,不能作为最顶层组件),不会影像到图片组件的正常使用,图片的拉伸、裁切等和图片组件的属性设置相关,和容器组件关系不大

ok,明白了

回复
2022-8-8 16:02:43
gnt_xxy
gnt_xxy

很实用,学习了

回复
2022-8-10 11:35:03
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐