• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1import {
2  memo,
3  __memo_context_type,
4  __memo_id_type,
5  State,
6  StateDecoratedVariable,
7  MutableState,
8  stateOf,
9  observableProxy
10} from '@ohos.arkui.stateManagement' // should be insert by ui-plugins
11
12import {
13  Text,
14  TextAttribute,
15  Column,
16  Component,
17  ButtonAttribute,
18  ClickEvent,
19  UserView,
20  Grid,
21  GridItem,
22  ForEach,
23  TextAlign,
24  NavDestination,
25  NavPathStack,
26  NavDestinationContext,
27  Callback
28} from '@ohos.arkui.component' // TextAttribute should be insert by ui-plugins
29
30import hilog from '@ohos.hilog'
31
32/**
33 * 验证接口
34 * ColumnStart
35 * columnEnd
36 * rowStart
37 * rowEnd
38 */
39@Component
40export struct Grid002Test {
41
42  @State numbers: string[] = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15"];
43
44  build() {
45    NavDestination() {
46      Column(undefined) {
47        Column() {
48          Grid() {
49            GridItem() {
50              Text('4')
51                .fontSize(16)
52                .backgroundColor(0xFAEEE0)
53                .width('100%')
54                .height('100%')
55                .textAlign(TextAlign.Center)
56            }.rowStart(1).rowEnd(2).columnStart(1).columnEnd(2) // 同时设置合理的行列号
57
58            ForEach(this.numbers, (item: string) => {
59              GridItem() {
60                Text(item)
61                  .fontSize(16)
62                  .backgroundColor(0xF9CF93)
63                  .width('100%')
64                  .height('100%')
65                  .textAlign(TextAlign.Center)
66              }
67            }, (item: string) => item)
68
69            GridItem() {
70              Text('5')
71                .fontSize(16)
72                .backgroundColor(0xDBD0C0)
73                .width('100%')
74                .height('100%')
75                .textAlign(TextAlign.Center)
76            }.columnStart(1).columnEnd(4) // 只设置列号，不会从第1列开始布局
77          }
78          .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
79          .rowsTemplate('1fr 1fr 1fr 1fr 1fr')
80          .width('90%').height(300)
81        }.width('100%')
82      }
83    }
84    .title('Grid基础功能用例002')
85  }
86}