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

1、蛟龙腾飞学习分享材料 HarmonyOS应用开发-栅格组件体验效果如图：点击图中文字。 一基本概念1.grid-container栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。支持通用属性、样式、方法、事件。属性：除了支持通用属性外，还支持如下属性： 名称类型默认值必填描述columnsstring | numberauto否设置当前布局总列数，使用string类型时仅支持auto，配置为auto时按照当前的sizetype决定总列数：xs：2列sm：4列md：8列lg：12列sizetypestringauto否设置当前栅格使用的响应尺寸类型，支持xs, sm, m

2、d, lg类型，使用auto时按照当前容器大小自动选择xs, sm, md, lg类型。gutter24px否设置Gutter宽度gridtemplate6+stringdefault否当设置了columns和sizetype属性为auto时，可以设置栅格容器的布局模板，通过布局模块设置不同响应尺寸下的Columns、Gutters和Margins方法：除了支持通用方法外，还支持如下方法：名称参数描述getColumns-返回栅格容器列数getColumnWidth-返回栅格容器column宽度getGutterWidth-返回栅格容器gutter宽度getSizeType-返回当前容器响应尺

3、寸类型（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的子容器组件。支持通用属性、样式、方法、事件。属性：除了支持通用属性外，还支持如下属性： 名称类型默认值必填描述xsnumber|object-否在分辨率为xs模式下，设置该项占用列数与偏移列数，当值为number类型时，仅设置列

4、数，也可通过object同时设置占用列数与偏移列数，如span: 1, offset: 0smnumber|object-否在分辨率为sm模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如span: 1, offset: 0mdnumber|object-否在分辨率为md模式下，该项占用列数与偏移列数，当值为number类型时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如span: 1, offset: 0lgnumber|object-否在分辨率为lg模式下，该项占用列数与偏移列数，当值为number类型

5、时，仅设置列数，也可通过object同时设置占用列数与偏移列数，如span: 1, offset: 0spannumber1否在未设置明确断点时，默认占用列数offsetnumber0否未设置具体分辨率模式下偏移时，当前元素延容器布局方向，默认偏移的列数二体验案例示例代码Index.hml示例代码： grid 1 grid 2 grid 3 Index.js示例代码：/ index.jsimport prompt from mpt;export default getCol(e) this.$element(mygrid).getColumns(function (result) prompt.showToast( message: e.target.id + result = + result, duration: 3000, ); ) , getColWidth(e) this.$element(mygrid).getColumnWidth(function (result) prompt.showToast( message: e.target.id + result = + result, duration: 3000, ); ) 源