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

panda_coder

发布于 2022-8-8 13:58

浏览

2收藏

效果图

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)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.

通过代码可以看出在不同屏幕尺寸下，会根据不同设置来进行布局。

相关属性

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}	-	-