HarmonyOS应用开发-栅格组件体验

效果如图：点击图中文字。  
一．基本概念1.grid-container栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。
支持通用属性、样式、方法、事件。
属性：除了支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
columns	string | number	auto	否	设置当前布局总列数，使用string类型时仅支持auto，配置为auto时按照当前的sizetype决定总列数： xs：2列 sm：4列 md：8列 lg：12列
sizetype	string	auto	否	设置当前栅格使用的响应尺寸类型，支持xs, sm, md, lg类型，使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。
gutter	<length>	24px	否	设置Gutter宽度
gridtemplate6+	string	default	否	当设置了columns和sizetype属性为auto时，可以设置栅格容器的布局模板，通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins

方法：除了支持通用方法外，还支持如下方法：

名称	参数	描述
getColumns	-	返回栅格容器列数
getColumnWidth	-	返回栅格容器column宽度
getGutterWidth	-	返回栅格容器gutter宽度
getSizeType	-	返回当前容器响应尺寸类型（xs|sm|md|lg）

2.grid-rowgrid-row是栅格布局容器grid-container的子容器组件，使用flex横向布局，排列每个grid-col容器，justify-content与align-items默认为flex-start，支持折行显示。
支持通用属性、样式、方法、事件。
3.grid-colgrid-col是栅格布局容器grid-row的子容器组件。
支持通用属性、样式、方法、事件。

属性：除了支持通用属性外，还支持如下属性：

名称	类型	默认值	必填	描述
xs	number|object	-	否	在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
sm	number|object	-	否	在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
md	number|object	-	否	在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
lg	number|object	-	否	在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如{"span": 1, "offset": 0}
span	number	1	否	在未设置明确断点时，默认占用列数
offset	number	0	否	未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数

二．体验案例示例代码Index.hml示例代码：

1. <!-- index.hml -->
   
2. <div style="flex-direction: column; padding-top: 80px;">
   
3.     <grid-container id="mygrid" columns="8" gutter="20px" style="background-color: pink;">
   
4.         <grid-row style="height:400px;justify-content:space-around;">
   
5.             <grid-col span="2">
   
6.                 <div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
   
7.                     <text style="color: dodgerblue;" onclick="getCol">grid 1</text>
   
8.                 </div>
   
9.             </grid-col>
   
10.             <grid-col span="3" style="background-color:orange;">
    
11.                 <div style="width: 100%;height: 100%;padding: 20px;align-items: center;">
    
12.                     <text onclick="getColWidth">grid 2</text>
    
13.                 </div>
    
14.             </grid-col>
    
15.             <grid-col span="4" style="background-color: aquamarine;">
    
16.                 <div style="width: 100%;height: 100%;align-items: center;">
    
17.                     <text on:click="getColWidth">grid 3</text>
    
18.                 </div>
    
19.             </grid-col>
    
20.         </grid-row>
    
21.     </grid-container>
    
22. </div>

复制代码

Index.js示例代码：

1. // index.js
   
2. import prompt from '@system.prompt';
   
3. export default {
   
4.     getCol(e) {
   
5.         this.$element('mygrid').getColumns(function (result) {
   
6.             prompt.showToast({
   
7.                 message: e.target.id + ' result = ' + result,
   
8.                 duration: 3000,
   
9.             });
   
10.         })
    
11.     },
    
12.     getColWidth(e) {
    
13.         this.$element('mygrid').getColumnWidth(function (result) {
    
14.             prompt.showToast({
    
15.                 message: e.target.id + ' result = ' + result,
    
16.                 duration: 3000,
    
17.             });
    
18.         })
    
19.     }
    
20. }

复制代码

源码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/grid

附件： HarmonyOS应用开发-栅格组件体验.docx (59.5 KB, 下载次数: 0)

2022-1-10 11:36 上传

点击文件名下载附件