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

鸿蒙时代

发布于 2022-1-10 11:29

9766浏览

1收藏

效果如图：
点击图中文字。
HarmonyOS应用开发-栅格组件体验-鸿蒙开发者社区
一．基本概念
1.grid-container
栅格布局容器根节点，使用grid-row与grid-col进行栅格布局。
支持通用属性、样式、方法、事件。
属性：
除了支持通用属性外，还支持如下属性：
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>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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,
            });
        })
    }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.