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

鸿蒙时代
发布于 2022-1-10 11:29
浏览
1收藏

效果如图:
点击图中文字。
HarmonyOS应用开发-栅格组件体验-鸿蒙开发者社区
一.基本概念
1.grid-container
栅格布局容器根节点,使用grid-row与grid-col进行栅格布局。
支持通用属性、样式、方法、事件。
属性:
除了支持通用属性外,还支持如下属性:
HarmonyOS应用开发-栅格组件体验-鸿蒙开发者社区
方法:
除了支持通用方法外,还支持如下方法:
HarmonyOS应用开发-栅格组件体验-鸿蒙开发者社区
2.grid-row
grid-row是栅格布局容器grid-container的子容器组件,使用flex横向布局,排列每个grid-col容器,justify-content与align-items默认为flex-start,支持折行显示。
支持通用属性、样式、方法、事件。
3.grid-col
grid-col是栅格布局容器grid-row的子容器组件。
支持通用属性、样式、方法、事件。

属性:
除了支持通用属性外,还支持如下属性:
HarmonyOS应用开发-栅格组件体验-鸿蒙开发者社区
二.体验案例
示例代码
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.js
import 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,
            });
        })
    }
}

源码地址:
https://gitee.com/jltfcloudcn/jump_to/tree/master/grid

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
HarmonyOS应用开发-栅格组件体验.docx 59.5K 12次下载
收藏 1
回复
举报
回复
    相关推荐