• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024 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 router from '@ohos.router';
17import worker, { MessageEvents } from '@ohos.worker';
18import { IconItem } from './IconView';
19import { IconItemSource } from './IconItemSource';
20
21@Component
22export struct WorkerUsage {
23  @State iconItemSourceList: IconItemSource[] = [];
24  private workerInstance: worker.ThreadWorker | undefined = undefined;
25
26  aboutToAppear() {
27    for (let index = 0; index < 20; index++) {
28      const numStart: number = index * 6;
29      // 此处循环使用6张图片资源
30      this.iconItemSourceList.push(new IconItemSource($r('app.media.nearby'), `item${numStart + 1}`));
31      this.iconItemSourceList.push(new IconItemSource($r('app.media.scan'), `item${numStart + 2}`));
32      this.iconItemSourceList.push(new IconItemSource($r('app.media.shop'), `item${numStart + 3}`));
33      this.iconItemSourceList.push(new IconItemSource($r('app.media.cards'), `item${numStart + 4}`));
34      this.iconItemSourceList.push(new IconItemSource($r('app.media.album'), `item${numStart + 5}`));
35      this.iconItemSourceList.push(new IconItemSource($r('app.media.applet'), `item${numStart + 6}`));
36    }
37    if (this.workerInstance !== undefined) {
38      this.workerInstance.onmessage = (e: MessageEvents): void => {
39        if (e.data instanceof Array) {
40          this.iconItemSourceList = e.data;
41        }
42      }
43    }
44
45  }
46
47  build() {
48    Column() {
49      // 顶部导航栏
50      Row() {
51        Image($r("app.media.back"))
52          .height(24)
53          .width(24)
54          .onClick(() => {
55            router.back();
56          })
57
58        Text($r('app.string.scenario_4'))
59          .fontSize(24)
60          .lineHeight(30)
61          .fontColor(Color.Black)
62          .fontWeight(FontWeight.Bold)
63          .textAlign(TextAlign.Start)
64          .margin({
65            left: 16
66          })
67      }
68      .width($r('app.string.percent_100'))
69      .height(50)
70      .justifyContent(FlexAlign.Start)
71      .padding({
72        left: 24
73      })
74
75      Button($r('app.string.change_image_number'), { type: ButtonType.Normal, stateEffect: true })
76        .fontSize(14)
77        .borderRadius(8)
78        .backgroundColor(Color.Blue)
79        .width(250)
80        .height(60)
81        .margin({
82          top: 30
83        })
84        .onClick(() => {
85          if (this.workerInstance !== undefined) {
86            this.workerInstance.postMessage(this.iconItemSourceList);
87          }
88        })
89      if (this.iconItemSourceList.length > 0) {
90        List({ space: 20 }) {
91          ForEach(this.iconItemSourceList, (item: IconItemSource) => {
92            ListItem() {
93              IconItem({ image: item.image, text: item.text });
94            }
95          }, (item: IconItemSource, index) => index.toString())
96        }
97        .divider({ strokeWidth: 2, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
98        .width($r('app.string.percent_100'))
99        .height($r('app.string.percent_100'))
100        .layoutWeight(1)
101      }
102    }
103    .width($r('app.string.percent_100'))
104    .height($r('app.string.percent_100'))
105    .alignItems(HorizontalAlign.Center)
106  }
107}