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

效果如图：
点击图中文字。

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

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

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

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

二．体验案例
示例代码
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