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 18 struct 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