• 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 { IconItem } from '../view/IconView';
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// X轴方向缩放比例
26const SCALE_X: number = 0.5;
27// Y轴方向缩放比例
28const SCALE_Y: number = 0.5;
29// 绕z轴旋转
30const ROTATE_Z: number = 1;
31// 旋转角度
32const ROTATE_ANGLE: number = 360;
33// 动画时长
34const DURATION: number = 3000;
35// 重复次数
36const ITERATIONS: number = -1;
37
38
39// IconItem相关数据
40class IconItemSource {
41  image: string | Resource = ''
42  text: string | Resource = ''
43
44  constructor(image: string | Resource = '', text: string | Resource = '') {
45    this.image = image;
46    this.text = text;
47  }
48}
49
50@Component
51export struct ProfitScene {
52  // renderGroup接口是否开启
53  @State renderGroupFlag: boolean = false;
54  private iconItemSourceList: IconItemSource[] = [];
55
56  aboutToAppear() {
57    // 遍历添加60个IconItem的数据
58    for (let index = 0; index < 20; index++) {
59      const numStart: number = index * 3;
60      // 此处循环使用三张图片资源
61      this.iconItemSourceList.push(new IconItemSource($r('app.media.album'), `item${numStart + 1}`));
62      this.iconItemSourceList.push(new IconItemSource($r('app.media.applet'), `item${numStart + 2}`));
63      this.iconItemSourceList.push(new IconItemSource($r('app.media.cards'), `item${numStart + 3}`));
64    }
65  }
66
67  build() {
68    Column() {
69      // 顶部导航栏
70      Row() {
71        Row() {
72          Image($r("app.media.back"))
73            .id('returnBtn')
74            .height($r('app.integer.RenderGroup_scene_back_image_size'))
75            .width($r('app.integer.RenderGroup_scene_back_image_size'))
76            .onClick(() => {
77              router.back();
78            })
79
80          Text($r('app.string.RenderGroup_profit_scene_title'))
81            .fontSize($r('app.integer.RenderGroup_scene_title_font'))
82            .lineHeight($r('app.integer.RenderGroup_scene_title_lineHeight'))
83            .fontColor(Color.Black)
84            .fontWeight(FontWeight.Bold)
85            .textAlign(TextAlign.Start)
86            .margin({
87              left: $r('app.integer.RenderGroup_scene_title_margin_left')
88            })
89        }
90        .margin({
91          left: $r('app.integer.RenderGroup_scene_row_margin_left')
92        })
93
94        Stack({ alignContent: Alignment.End }) {
95          Button(this.renderGroupFlag ? $r('app.string.RenderGroup_button_on') : $r('app.string.RenderGroup_button_off'), {
96            type: ButtonType.Normal,
97            stateEffect: true
98          })
99            .id("renderGroupSwitch")
100            .fontSize($r('app.integer.RenderGroup_scene_button_fontSize'))
101            .borderRadius($r('app.integer.RenderGroup_scene_button_borderRadius'))
102            .backgroundColor($r('app.color.RenderGroup_scene_button_backgroundColor'))
103            .width($r('app.integer.RenderGroup_scene_title_button_width'))
104            .height($r('app.integer.RenderGroup_scene_title_button_height'))
105            .margin({
106              right: $r('app.integer.RenderGroup_scene_button_margin_right')
107            })
108            .onClick(() => {
109              this.renderGroupFlag = !this.renderGroupFlag;
110            })
111        }
112      }
113      .height($r('app.integer.RenderGroup_scene_title_row_height'))
114      .width($r('app.string.layout_100_percent'))
115      .backgroundColor(Color.White)
116      .justifyContent(FlexAlign.SpaceBetween)
117
118      // IconItem放置在grid内
119      GridRow({
120        columns: COLUMNS,
121        gutter: { x: GUTTER_X, y: GUTTER_Y },
122        breakpoints: { value: ["400vp", "600vp", "800vp"], reference: BreakpointsReference.WindowSize },
123        direction: GridRowDirection.Row
124      }) {
125        ForEach(this.iconItemSourceList, (item: IconItemSource) => {
126          GridCol() {
127            IconItem({ image: item.image, text: item.text, renderGroupFlag: this.renderGroupFlag })
128              .transition(TransitionEffect.scale({ x: SCALE_X, y: SCALE_Y })
129                .animation({ duration: DURATION, curve: Curve.FastOutSlowIn, iterations: ITERATIONS })
130                .combine(TransitionEffect.rotate({ z: ROTATE_Z, angle: ROTATE_ANGLE })
131                  .animation({ duration: DURATION, curve: Curve.Linear, iterations: ITERATIONS })))
132          }
133          .height($r('app.integer.RenderGroup_scene_GridCol_height'))
134          .width($r('app.string.layout_17_percent'))
135        })
136      }
137      .width($r('app.string.layout_100_percent'))
138      .height($r('app.string.layout_100_percent'))
139    }
140    .width($r('app.string.layout_100_percent'))
141    .height($r('app.string.layout_100_percent'))
142    .alignItems(HorizontalAlign.Center)
143  }
144}