• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2021 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16@Entry
17@Component
18struct GridRootView {
19    changeColor:boolean = true;
20    dataArrayA:string[] = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
21    @State itemColor:number = 0xffff00;
22
23    build(){
24        Column(){
25            Text('--------------- Grid : foreach test --------------->')
26            Grid(){
27                ForEach(
28                    this.dataArrayA, //Data array
29                    (item) => {
30                        GridItem(){
31                            Text(item)
32                        }.width(100).height(50).backgroundColor(0x00ff00)
33                    },
34                    item => item
35                )
36            }
37            .height(100).width(650)
38            .columnsTemplate("1fr 1fr 1fr 1fr 1fr 1fr 1fr").columnsGap(50) //Grid
39            Text('--------------- Grid : item start-end test --------------->')
40            Grid(){
41                GridItem(){
42                    Text('1').fontSize(11)
43                }
44                .height(100).width(150).backgroundColor(0x00ff00).borderWidth(2.0)
45                GridItem(){
46                    Text('2').fontSize(22)
47                }
48                .height(100).width(150).backgroundColor(0x00ffff).borderWidth(2.0).borderStyle(2)
49                GridItem(){
50                    Text('3').fontSize(33)
51                }
52                .height(100).width(150).backgroundColor(0x0000ff).borderWidth(2.0).borderColor(0xff46f7).borderStyle(1)
53                GridItem(){
54                    Text('click me').fontSize(24)
55                }
56                .height(100).width(150).backgroundColor(this.itemColor).borderWidth(2.0).borderColor(0xff46f7).borderStyle(3)
57                .onClick(() => {
58                    if (this.changeColor == true) {
59                        this.itemColor = 0x0000ff;
60                    } else {
61                        this.itemColor = 0xffff00;
62                    }
63                    this.changeColor = !this.changeColor;
64                })
65            }
66            .width(350).height(250)
67            .columnsTemplate("1fr 1fr 1fr").rowsTemplate("1fr 1fr").columnsGap(50).rowsGap(50)
68        }
69    }
70}
71