• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2023 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
16import { NonIconItem } from '../view/NonIconView';
17import router from '@ohos.router'
18
19// GridRow列数
20const COLUMNS: number = 6;
21// GridRow横向间隙
22const GUTTER_X: number = 0;
23// GridRow纵向间隙
24const GUTTER_Y: number = 0;
25
26// IconItem相关数据
27class IconItemSource {
28  image: string | Resource = ''
29  text: string | Resource = ''
30
31  constructor(image: string | Resource = '', text: string | Resource = '') {
32    this.image = image;
33    this.text = text;
34  }
35}
36
37@Component
38export struct NonProfitScene {
39  // renderGroup接口是否开启
40  @State renderGroupFlag: boolean = false;
41  private iconItemSourceList: IconItemSource[] = [];
42
43  aboutToAppear() {
44    // 遍历添加60个IconItem的数据
45    for (let index = 0; index < 20; index++) {
46      const numStart: number = index * 3;
47      // 此处循环使用三张图片资源
48      this.iconItemSourceList.push(new IconItemSource($r('app.media.nearby'), `item${numStart + 1}`));
49      this.iconItemSourceList.push(new IconItemSource($r('app.media.scan'), `item${numStart + 2}`));
50      this.iconItemSourceList.push(new IconItemSource($r('app.media.shop'), `item${numStart + 3}`));
51    }
52  }
53
54  build() {
55    Column() {
56      // 顶部导航栏
57      Row() {
58        Row() {
59          Image($r("app.media.back"))
60            .id('returnBtn')
61            .height($r('app.integer.RenderGroup_scene_back_image_size'))
62            .width($r('app.integer.RenderGroup_scene_back_image_size'))
63            .onClick(() => {
64              router.back();
65            })
66
67          Text($r('app.string.RenderGroup_nonProfit_scene_title'))
68            .fontSize($r('app.integer.RenderGroup_scene_title_font'))
69            .lineHeight($r('app.integer.RenderGroup_scene_title_lineHeight'))
70            .fontColor(Color.Black)
71            .fontWeight(FontWeight.Bold)
72            .textAlign(TextAlign.Start)
73            .margin({
74              left: $r('app.integer.RenderGroup_scene_title_margin_left')
75            })
76        }
77        .margin({
78          left: $r('app.integer.RenderGroup_scene_row_margin_left')
79        })
80
81        Stack({ alignContent: Alignment.End }) {
82          Button(this.renderGroupFlag ? $r('app.string.RenderGroup_button_on') : $r('app.string.RenderGroup_button_off'), {
83            type: ButtonType.Normal,
84            stateEffect: true
85          })
86            .id("renderGroupSwitch")
87            .fontSize($r('app.integer.RenderGroup_scene_button_fontSize'))
88            .borderRadius($r('app.integer.RenderGroup_scene_button_borderRadius'))
89            .backgroundColor($r('app.color.RenderGroup_scene_button_backgroundColor'))
90            .width($r('app.integer.RenderGroup_scene_title_button_width'))
91            .height($r('app.integer.RenderGroup_scene_title_button_height'))
92            .margin({
93              right: $r('app.integer.RenderGroup_scene_button_margin_right')
94            })
95            .onClick(() => {
96              this.renderGroupFlag = !this.renderGroupFlag;
97            })
98        }
99      }
100      .height($r('app.integer.RenderGroup_scene_title_row_height'))
101      .width($r('app.string.layout_100_percent'))
102      .backgroundColor(Color.White)
103      .justifyContent(FlexAlign.SpaceBetween)
104
105      // IconItem放置在grid内
106      GridRow({
107        columns: COLUMNS,
108        gutter: { x: GUTTER_X, y: GUTTER_Y },
109        breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize },
110        direction: GridRowDirection.Row
111      }) {
112        ForEach(this.iconItemSourceList, (item: IconItemSource) => {
113          GridCol() {
114            NonIconItem({ image: item.image, text: item.text, renderGroupFlag: this.renderGroupFlag })
115          }
116          .height($r('app.integer.RenderGroup_scene_GridCol_height'))
117          .width($r('app.string.layout_17_percent'))
118        })
119      }
120      .width($r('app.string.layout_100_percent'))
121      .height($r('app.string.layout_100_percent'))
122    }
123    .width($r('app.string.layout_100_percent'))
124    .height($r('app.string.layout_100_percent'))
125    .alignItems(HorizontalAlign.Center)
126  }
127}