• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 2024-2025 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          .textOverflow({ overflow: TextOverflow.MARQUEE })
65          .margin({
66            left: 16
67          })
68      }
69      .width($r('app.string.percent_100'))
70      .height(50)
71      .justifyContent(FlexAlign.Start)
72      .padding({
73        left: 24
74      })
75
76      Button($r('app.string.change_image_number'), { type: ButtonType.Normal, stateEffect: true })
77        .fontSize(14)
78        .borderRadius(8)
79        .backgroundColor(Color.Blue)
80        .width(250)
81        .height(60)
82        .margin({
83          top: 30
84        })
85        .onClick(() => {
86          if (this.workerInstance !== undefined) {
87            this.workerInstance.postMessage(this.iconItemSourceList);
88          }
89        })
90      if (this.iconItemSourceList.length > 0) {
91        List({ space: 20 }) {
92          ForEach(this.iconItemSourceList, (item: IconItemSource) => {
93            ListItem() {
94              IconItem({ image: item.image, text: item.text });
95            }
96          }, (item: IconItemSource, index) => index.toString())
97        }
98        .divider({ strokeWidth: 2, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
99        .width($r('app.string.percent_100'))
100        .height($r('app.string.percent_100'))
101        .layoutWeight(1)
102      }
103    }
104    .width($r('app.string.percent_100'))
105    .height($r('app.string.percent_100'))
106    .alignItems(HorizontalAlign.Center)
107  }
108}