• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2022 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 */
15import { obtainImgVertical, obtainImgV, obtainImgVs } from '../utils/ImageList'
16
17interface ImageList {
18  image: Resource
19  value: string
20}
21
22@Component
23export struct ButtonComponent {
24  private onInputValue: (result: string) => void = () => {
25  }
26
27  build() {
28    Row() {
29      Grid() {
30        ForEach(obtainImgV(), (item: ImageList, index: number | undefined) => {
31          GridItem() {
32            Button({ type: ButtonType.Normal }) {
33              Image(item.image)
34                .width('45%')
35                .height('35%')
36                .objectFit(ImageFit.Cover)
37            }
38            .id(item.value)
39            .width('100%')
40            .height('100%')
41            .borderRadius('16px')
42            .backgroundColor(index !== undefined && index < 2 ? '#33007DFF' : '#FF006CDE')
43            .onClick(() => {
44              this.onInputValue(item.value)
45            })
46          }
47          .rowStart(index !== undefined ? index : 0)
48          .rowEnd(index !== undefined && index === 2 ? (index !== undefined ? index + 1 : 0) : (index !== undefined ? index : 0))
49          .columnStart(4)
50          .columnEnd(4)
51        })
52        ForEach(obtainImgVs(), (item: ImageList, index) => {
53          GridItem() {
54            Button({ type: ButtonType.Normal }) {
55              Image(item.image)
56                .width('45%')
57                .height('35%')
58                .objectFit(ImageFit.Cover)
59            }
60            .id(item.value)
61            .width('100%')
62            .height('100%')
63            .borderRadius('16px')
64            .backgroundColor('#33007DFF')
65            .onClick(() => {
66              this.onInputValue(item.value)
67            })
68          }
69          .rowStart(index !== undefined ? index : 0)
70          .rowEnd(index !== undefined ? index : 0)
71          .columnStart(3)
72          .columnEnd(3)
73        })
74        ForEach(obtainImgVertical(), (item: ImageList, index) => {
75          GridItem() {
76            Button({ type: ButtonType.Normal }) {
77              Image(item.image)
78                .width('55%')
79                .height('55%')
80                .objectFit(ImageFit.Cover)
81            }
82            .id(item.value)
83            .width('100%')
84            .height('100%')
85            .borderRadius('16px')
86            .backgroundColor('#F0F0F0')
87            .onClick(() => {
88              this.onInputValue(item.value)
89            })
90          }
91          .columnStart(index === undefined ? 0 : index % 3)
92          .columnEnd(index !== undefined && item.value === '0' ? (index % 3 + 1) : index !== undefined ? index % 3 : 0)
93        })
94      }
95      .columnsGap(5)
96      .rowsGap(5)
97      .columnsTemplate('1fr 1fr 1fr 1fr 1fr')
98      .rowsTemplate('1fr 1fr 1fr 1fr ')
99    }
100    .padding(10)
101    .size({ width: '100%', height: '56%' })
102  }
103}