苏公安网备 32011402010933号智能客服
你问我答，随时在线为你解决问题
- 探索了解鸿蒙应用和多设备开发，学习如何构建应用/元服务应用形态HarmonyOS 应用One as All，All as One
元服务秒开直达 服务随行 无处不在
游戏为游戏创意玩法带来无限可能
多设备应用开发穿戴
折叠屏手机鸿蒙电脑开发者学堂视频课程Codelabs - 开发获取官方开发工具和文档等资源，将创意转化为鸿蒙应用开发工具DevEco Studio应用开发 IDE, AI Agent 和 CLI
小艺开放平台Skill 和智能体开发平台
ArkTS
ArKUI
AppGallery ConnectDevEco Testing开发资源工具下载示例代码开发文档最佳实践 - 分发通过华为应用市场发布你的应用，多渠道触达用户应用分发应用市场纯净安全的全场景应用分发平台
游戏中心
应用审核政策服务分发小艺HarmonyOS 的超级 AI 入口
智慧助手·今天
服务分发文档内容分发主题服务
内容分发文档 - 推广与变现一站式流量增长与营销变现平台推广应用推广引擎全链路应用推广与增长服务平台
鲸鸿动能广告为企业广告主提供广告营销服务
联运服务推广文档变现鲸鸿动能流量变现使能应用展示广告，实现流量变现应用内支付变现文档 - 生态合作携手伙伴共建共享鸿蒙智能终端生态伙伴 SDK一站式获取安全可靠的鸿蒙伙伴 SDK
生态服务鸿蒙应用开发、培训和人力服务
服务商伙伴中心华为终端云服务商伙伴的统一门户
伙伴入驻指南生态市场介绍，卖家和买家服务指引
廉洁政策合作伙伴诚信廉洁政策
- 支持获取客服帮助、技术支持、活动资讯等信息智能客服24小时 AI 在线自助服务，即问即答
社区问答在官方论坛提问，与开发者互动交流
在线提单提交工单，获得技术支持
开发者活动HDD 等线下活动速览及报名入口
资讯帮助指南
蛟龙腾飞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-row
grid-row是栅格布局容器grid-container的子容器组件，使用flex横向布局，排列每个grid-col容器，justify-content与align-items默认为flex-start，支持折行显示。
支持通用属性、样式、方法、事件。
3.grid-col
grid-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示例代码：
<!-- index.hml --><div style="flex-direction: column; padding-top: 80px;"> <grid-container id="mygrid" columns="8" gutter="20px" style="background-color: pink;"> <grid-row style="height:400px;justify-content:space-around;"> <grid-col span="2"> <div style="align-items: center;justify-content: center;height: 100%;width: 100%;"> <text style="color: dodgerblue;" onclick="getCol">grid 1</text> </div> </grid-col> <grid-col span="3" style="background-color:orange;"> <div style="width: 100%;height: 100%;padding: 20px;align-items: center;"> <text onclick="getColWidth">grid 2</text> </div> </grid-col> <grid-col span="4" style="background-color: aquamarine;"> <div style="width: 100%;height: 100%;align-items: center;"> <text on:click="getColWidth">grid 3</text> </div> </grid-col> </grid-row> </grid-container></div>Index.js示例代码：
// index.jsimport prompt from '@system.prompt';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, }); }) }}源码地址：
1
4
浏览580 发布于2022-01-10 03:08未知归属地
全部评论
最多点赞
最新发布
最早发布
写回答
新增插入模板功能
一键使用模板，快速填写内容，轻松发帖～
知道了
- 为了保障您的信息安全，请勿上传您的敏感个人信息（如您的密码等信息）和您的敏感资产信息（如关键源代码、签名私钥、调试安装包、业务日志等信息），且您需自行承担由此产生的信息泄露等安全风险。
- 如您发布的内容为转载内容，请注明内容来源。
我要发帖子
了解社区公约，与您携手共创和谐专业的开发者社区。