• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (c) 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
16// 自定义卡片对象格式
17interface CASES {
18  name: string,
19  url: string,
20  describe: string,
21  img: string
22}
23
24const ACTION_TYPE_ROUTER: string = 'router';
25const ACTION_TYPE_MESSAGE: string = 'message';
26const ABILITY_NAME: string = 'EntryAbility';
27
28let casesCardInfo = new LocalStorage();
29
30@Entry(casesCardInfo)
31@Component
32struct Widget_DynamicCard {
33  @LocalStorageProp('detail') detail: CASES[] = []; // 卡片对象集合
34  private swiperController: SwiperController = new SwiperController();
35
36  aboutToAppear(): void {
37    postCardAction(this, {
38      action: ACTION_TYPE_MESSAGE,
39      params: {
40        method: $r('app.string.widget_message_content')
41      }
42    })
43  }
44
45  build() {
46    Column() {
47      Stack() {
48        if (this.detail.length) {
49          Swiper(this.swiperController) {
50            ForEach(this.detail, (item: CASES) => {
51              Stack() {
52                Image($r(`app.media.${item.img}`))// 案例图片
53                  .width('100%')
54                  .height('100%')
55                Stack() {
56                  Column()
57                    .width('100%')
58                    .height(50)
59                    .backgroundColor(Color.Black)
60                    .opacity(0.6)
61                  Text(item.name) // 案例名称
62                    .width('100%')
63                    .fontSize($r('app.integer.widget_name_fontsize'))
64                    .fontColor(Color.White)
65                    .fontWeight(FontWeight.Medium)
66                    .textAlign(TextAlign.Center)
67                }
68              }
69              .alignContent(Alignment.Bottom)
70              .width($r('app.string.widget_display_full_width_percent'))
71              .height($r('app.string.widget_display_full_height_percent'))
72              .onClick(() => {
73                // 点击卡片进入对应案例
74                postCardAction(this, {
75                  action: ACTION_TYPE_ROUTER,
76                  abilityName: ABILITY_NAME,
77                  params: { targetPage: item.url }
78                });
79              })
80            })
81          }
82          .autoPlay(true)
83        } else {
84          Image($r('app.media.share_button'))
85            .width('100%')
86            .height('100%')
87        }
88      }
89      .width($r('app.string.widget_display_full_width_percent'))
90      .height($r('app.string.widget_display_full_height_percent'))
91    }
92  }
93}