HarmonyOS5新闻阅读类行业实践-频道选择（二）

HarmonyOS5【点我加入我的战队！领鸿蒙限定礼盒】

场景介绍

频道选择是新闻阅读类应用中的典型场景之一，如用户可以编辑订阅频道。

本示例使用Grid组件实现添加、删除频道以及对频道进行拖动排序等功能。

效果预览

实现思路

1. 通过bindSheet方法给组件绑定半模态页面，点击图标后唤起频道选择页面。

   1. TabsWithBarIcon({ tabArray: this.mySubscriptionList, canShowEditSheet: this.canShowSheet })
   2. // 绑定半模态页面
   3. .bindSheet($$this.canShowSheet, this.channelEditSheetBuilder(), {});
   5. Image($r(\'sys.media.ohos_ic_public_add\'))
   6. .onClick(() => {
   7. this.showEditSheet = true; // 打开半模态页面
   8. });

2. 通过设置editMode属性进入Grid组件编辑模式，并设置supportAnimation属性开启GridItem拖拽动画。
3. 在onItemDragStart事件中，设置拖拽过程中显示的组件样式。
4. 在onItemDrop事件中，获取拖拽起始位置itemIndex和插入位置insertIndex，并实现移动元素位置的逻辑。

   1. Grid() {
   2. // ...网格元素
   3. }
   4. .editMode(this.isEditMode)
   5. .supportAnimation(true) // 开启拖拽动画
   6. .onItemDragStart((event: ItemDragInfo, itemIndex: number) => {
   7. // 跟随手指拖动时所渲染的网格内容
   8. return this.gridDragBuilder(this.mySubscriptionList[itemIndex].name);
   9. })
   10. .onItemDrop((event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
   11. if (isSuccess) {
   12. // 成功释放后，移动元素位置
   13. moveElement(this.mySubscriptionList, itemIndex, insertIndex);
   14. }
   15. });

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持Harmony 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──common
3. │ │ └──CommonConstants.ets // 通用常量类
4. │ ├──components
5. │ │ ├──ChannelSelection.ets // 精选频道选择组件
6. │ │ ├──HeaderToolBar.ets // 头部工具栏组件
7. │ │ ├──MySubscription.ets // 我的订阅组件
8. │ │ ├──NewsContent.ets // 新闻内容组件
9. │ │ └──TabsWithBarIcon.ets // 附带右侧图标的Tabs容器组件
10. │ ├──entryability
11. │ │ └──EntryAbility.ets
12. │ ├──model
13. │ │ ├──ChannelData.ets // 频道数据类
14. │ │ └──NewsData.ets // 新闻数据类
15. │ ├──pages
16. │ │ ├──ChannelEditSheet.ets // 频道编辑页
17. │ │ └──HomePage.ets // 应用首页
18. │ └──utils
19. │ └──ArrayUtil.ets // 数组处理类
20. └──entry/src/main/resources // 应用资源目录

参考文档

Grid

GridItem

半模态转场

代码下载

频道选择示例代码