• 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  Button,
18  ButtonAttribute,
19  ClickEvent,
20  UserView,
21  Grid,
22  GridItem,
23  GridLayoutOptions,
24  EdgeEffect,
25  BarState,
26  GridItemAttribute,
27  Color,
28  GridItemStyle,
29  GridDirection,
30  GridAttribute,
31  ScrollState,
32  Row,
33  ForEach,
34  Scroller,
35  TextAlign,
36  NavDestination,
37  NavPathStack,
38  NavDestinationContext,
39  Callback
40} from '@ohos.arkui.component' // TextAttribute should be insert by ui-plugins
41
42import hilog from '@ohos.hilog'
43
44/**
45 * 验证接口
46 * scrollBar
47 * columnsTemplate
48 * columnsGap
49 * GridItemStyle，GridItemOptions
50 * enableScrollInteraction
51 * onReachStart
52 * onReachEnd
53 * onScrollIndex
54 */
55@Component
56export struct Grid001Test {
57  @State colorNumber1: number = 0xF9CF93;
58  @State colorNumber2: number = 0xF9CF93;
59  @State colorNumber3: number = 0xF9CF93;
60  @State barState: BarState = BarState.On;
61  @State columnsTem: string = '1fr';
62  @State gridItemStyle: GridItemStyle = GridItemStyle.NONE;
63  @State enableScrollInteraction: boolean = true;
64  scroller: Scroller = new Scroller()
65  @State numbers: Array<string> = ['0', '1', '2', '3', '4', '5', '6','7', '8', '9', '10', '11', '12', '13', '14', '15'];
66
67  build() {
68    NavDestination() {
69      Column(undefined) {
70        Column(undefined) {
71          Row(undefined) {
72            Text('scrollBar')
73              .fontSize(16)
74          }
75
76          Row(undefined) {
77            Button('BarState.ON')
78              .onClick((e: ClickEvent) => {
79                this.barState = BarState.On;
80              })
81            Button('BarState.OFF')
82              .onClick((e: ClickEvent) => {
83                this.barState = BarState.Off;
84              })
85            Button('BarState.AUTO')
86              .onClick((e: ClickEvent) => {
87                this.barState = BarState.Auto;
88              })
89          }
90
91          Row(undefined) {
92            Text('columnsTemplate')
93              .fontSize(16)
94          }
95
96          Row(undefined) {
97            Button('1fr')
98              .onClick((e: ClickEvent) => {
99                this.columnsTem = '1fr';
100              })
101            Button('1fr 1fr')
102              .onClick((e: ClickEvent) => {
103                this.columnsTem = '1fr 1fr';
104              })
105            Button('1fr 1fr 2fr')
106              .onClick((e: ClickEvent) => {
107                this.columnsTem = '1fr 1fr 2fr';
108              })
109          }
110
111          Row(undefined) {
112            Text('GridItemStyle')
113              .fontSize(16)
114          }
115
116          Row(undefined) {
117            Button('PLAIN')
118              .onClick((e: ClickEvent) => {
119                this.gridItemStyle = GridItemStyle.PLAIN;
120              })
121            Button('NONE')
122              .onClick((e: ClickEvent) => {
123                this.gridItemStyle = GridItemStyle.NONE;
124              })
125          }
126
127          Row(undefined) {
128            Text('enableScrollInteraction')
129              .fontSize(16)
130          }
131
132          Row(undefined) {
133            Button('true')
134              .onClick((e: ClickEvent) => {
135                this.enableScrollInteraction = true;
136              })
137            Button('false')
138              .onClick((e: ClickEvent) => {
139                this.enableScrollInteraction = false;
140              })
141          }
142
143          Grid(this.scroller) {
144            ForEach(this.numbers, (day: string) => {
145              GridItem({ style: this.gridItemStyle }) {
146                Text(day)
147                  .fontSize(16)
148                  .backgroundColor(Color.Red)
149                  .width('100%')
150                  .height(40)
151                  .textAlign(TextAlign.Center)
152              }
153            })
154          }
155          .columnsTemplate(this.columnsTem)
156          .columnsGap(5)
157          .rowsGap(5)
158          .height(300)
159          .width(300)
160          .backgroundColor(0xF9CF93)
161          .scrollBar(this.barState)
162          .enableScrollInteraction(this.enableScrollInteraction)
163          .clip(true)
164          .onReachStart(() => {
165            hilog.info(0x0000, 'testTag', 'XXX' + 'Grid onReachStart');
166          })
167          .onReachEnd(() => {
168            hilog.info(0x0000, 'testTag', 'XXX' + 'Grid onReachEnd');
169          })
170          .onScrollIndex((first: number, last: number) => {
171            hilog.info(0x0000, 'testTag', 'XXX' + 'Grid onScrollIndex');
172            hilog.info(0x0000, 'testTag', 'XXX' + 'Grid onScrollIndex first:' + first);
173            hilog.info(0x0000, 'testTag', 'XXX' + 'Grid onScrollIndex last:' + last);
174          })
175        }
176      }
177    }
178    .title('Grid基础功能用例001')
179  }
180}