• 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 */
15import { ListInfo } from '../model/ListInfo';
16import { MEMO_DATA } from '../model/MockData';
17import { ListExchange } from '../utils/ListExchange';
18import { ListExchangeCtrl } from '../model/ListExchangeCtrl';
19
20const ITEM_HEIGHT: number = 50; // 列表项高度
21
22/**
23 * 功能说明: 本示例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。
24 * 推荐场景: 扣款列表
25 *
26 * 核心组件:
27 * 1. ListExchange: 自定义列表交换视图组件
28 * 2. ListInfo: 设置列表项元素的类
29 *
30 * 实现步骤:
31 * 1.设置列表项元素的类。开发者可以根据自身业务列表项的需求场景自行配置。
32 * class ListInfo {
33     icon: ResourceStr = '';
34     name: ResourceStr = '';
35
36     constructor(icon: ResourceStr = '', name: ResourceStr = '') {
37       this.icon = icon;
38       this.name = name;
39     }
40   }
41 *
42 * 2. 数据准备。首先构建一个ListInfo数组，然后向其中传入对应的内容数据。
43 * @example
44 * const MEMO_DATA: ListInfo[] = [
45         new ListInfo($r("app.media.list_exchange_ic_public_cards_filled"), '账户余额'),
46         new ListInfo($r("app.media.list_exchange_ic_public_cards_filled2"), 'xx银行储蓄卡（1234）'),
47         new ListInfo($r("app.media.list_exchange_ic_public_cards_filled3"), 'xx银行储蓄卡（1238）'),
48         new ListInfo($r("app.media.list_exchange_ic_public_cards_filled4"), 'xx银行储蓄卡（1236）')];
49 * @State appInfoList: ListInfo[] = MEMO_DATA;
50 *
51 * 3. 声明管理列表项交换的类ListExchangeCtrl。通过ListExchangeCtrl来实现列表项与列表项之间的位置交换。具体实现请看后续的实现步骤章节。
52 * 列表项交换类
53 * @State listExchangeCtrl: ListExchangeCtrl<ListInfo> = new ListExchangeCtrl();
54
55 * 4.自定义列表项组件。
56 * listItemInfo: 列表项数据信息
57 * @Builder deductionView(listItemInfo: ListInfo) {...}
58 *
59 * 5. 构建自定义列表视图。在代码合适的位置使用ListExchange组件并传入对应的参数。
60 * @example
61 * 列表交换视图
62 * appInfoList: 数据源
63 * listExchangeCtrl: 列表项交换类
64 * deductionView: 列表项视图
65 * ListExchange({
66     appInfoList: this.appInfoList,
67     listExchangeCtrl: this.listExchangeCtrl,
68     deductionView: (listItemInfo: Object) => {
69       this.deductionView(listItemInfo as Listinfo)
70     }
71   })
72 */
73
74@Component
75export struct ListExchangeViewComponent {
76  // 初始化列表数据
77  @State appInfoList: ListInfo[] = MEMO_DATA;
78  // 列表项元素交换类
79  @State listExchangeCtrl: ListExchangeCtrl<ListInfo> = new ListExchangeCtrl();
80
81  aboutToAppear(): void {
82    this.listExchangeCtrl.initData(this.appInfoList);
83  }
84
85  build() {
86    Column() {
87      // 标题栏
88      Row() {
89        Text($r('app.string.list_exchange_deduction_sort'))
90          .textAlign(TextAlign.Start)
91        Blank()
92        Text($r('app.string.list_exchange_custom_sort'))
93      }
94      .backgroundColor(Color.White)
95      .border({
96        radius: {
97          topLeft: $r('app.string.ohos_id_corner_radius_default_l'),
98          topRight: $r('app.string.ohos_id_corner_radius_default_l')
99        }
100      })
101      .padding({
102        left: $r('app.string.ohos_id_card_padding_start'),
103        right: $r('app.string.ohos_id_card_padding_start')
104      })
105      .width('100%')
106      .height($r('app.integer.list_exchange_title_height'))
107
108      /**
109       * 列表交换视图
110       * appInfoList: 数据源
111       * listExchangeCtrl: 列表项交换类
112       * deductionView: 列表项视图
113       */
114      ListExchange({
115        appInfoList: this.appInfoList,
116        listExchangeCtrl: this.listExchangeCtrl,
117        deductionView: (listItemInfo: Object) => {
118          this.deductionView(listItemInfo as ListInfo)
119        }
120      })
121    }
122    .height('100%')
123    .width('100%')
124    .justifyContent(FlexAlign.Center)
125    .backgroundColor($r('app.color.list_exchange_background_color'))
126    .padding({ left: $r('app.string.ohos_id_card_padding_start'), right: $r('app.string.ohos_id_card_padding_start') })
127  }
128
129  /**
130   * ListItem自定义组件（开发者可以根据自己的需求设置列表项的UI）
131   */
132  @Builder
133  deductionView(listItemInfo: ListInfo) {
134    Row() {
135      Image(listItemInfo.icon)
136        .width($r('app.integer.list_exchange_icon_size'))
137        .height($r('app.integer.list_exchange_icon_size'))
138        .draggable(false) // TODO：知识点：保持默认值true时，图片有默认拖拽效果，会影响Grid子组件拖拽判断，所以修改为false
139      Text(listItemInfo.name)
140        .margin({ left: $r('app.string.ohos_id_elements_margin_vertical_l') })
141      Blank()
142      Image($r('app.media.list_exchange_ic_public_drawer'))
143        .width($r('app.integer.list_exchange_icon_size'))
144        .height($r('app.integer.list_exchange_icon_size'))
145        .objectFit(ImageFit.Cover)
146        .draggable(false) // TODO：知识点：保持默认值true时，图片有默认拖拽效果，会影响Grid子组件拖拽判断，所以修改为false
147    }
148    .width('100%')
149    .height(ITEM_HEIGHT)
150    .backgroundColor(Color.White)
151    .padding({
152      left: $r('app.string.ohos_id_card_padding_start'),
153      right: $r('app.string.ohos_id_card_padding_start')
154    })
155  }
156}