HarmonyOS 鸿蒙Next 应用消息列表场景

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next 应用消息列表场景
<markdown _ngcontent-sbx-c147="" class="markdownPreContainer">

介绍

本示例为模拟应用内消息场景。模拟实现的主要功能有以下两点：

  • 模拟消息设置页面，可以设置接受新消息提醒和横幅提醒
  • 模拟应用消息列表，可以查看应用内所有消息，也可以点击进入查看消息详细内容

应用消息列表场景源码链接

效果图

图片名称

使用说明

  1. 进入应用后，显示两个按钮，点击模拟消息设置页面跳转，即可跳转至消息设置页面。
  2. 消息设置页面点击APP内横幅提醒的开关，可以进行横幅提醒的开关设置。
  3. 返回后点击模拟应用列表消息跳转，跳转至应用列表消息页面，展示应用内所有消息。
  4. 点击各个消息，跳转至消息详情页面，查看消息的具体内容。

实现思路

主页设置按钮进行跳转

通过设置两个Button组件，点击进行不同页面的跳转。

深色代码主题
复制
Button("模拟消息设置页面调转")
  ···
  .onClick(() => {
    this.pathStack.pushPath({ name: "MessageSetting" })
  })

消息设置页面的实现

  1. 通过Toggle组件实现两种状态之间的切换，使用开关Switch样式，用来控制设备的横幅提醒功能的启停。具体事项：通过调用Toggle函数，传入一个对象参数，该参数包含type和isOn两个属性。type属性指定了Toggle的样式，isOn属性指定Toggle的初始状态，即是否选中。
深色代码主题
复制
Toggle({ type: ToggleType.Switch, isOn: true })
  .selectedColor('#00a57c')
  .onChange((isOn: boolean) => {
    console.info('Component status:' + isOn)
  })
  1. ForEach就爱在所有消息设置内容。
深色代码主题
复制
ForEach(this.messageSettingRender, (settingItem: MessageSettingRender) => {
  Column() {
    Column() {
      Text(settingItem.settingDescription)
    }
  }
})

应用消息列表的实现

  1. 首先定义ListMessageRender，确定数据的结构构成。
深色代码主题
复制
class ListMessageRender {
  renderImg: ResourceStr
  renderTitle: ResourceStr
  renderSubTitle: ResourceStr
  renderTime: string
  renderQuantity?: string
  ···
}
  1. 定义设置按钮，点击后可跳转至消息设置页面。
深色代码主题
复制
Button("去开启")
  .height(25)
  .fontSize(12)
  .backgroundColor("#ff7c1d")
  .onClick(() => {
    this.pathStack.pushPath({ name: "MessageSetting" })
  })
  1. 定义查看系统消息按钮，点击跳转至系统消息页面，并且会重新加载数据。
深色代码主题
复制
.onClick(() => {
  this.pathStack.pushPathByName("SystemMessage", this.newsAdapter, true)
})
  1. 点击List中每个item，跳转到相关的详情页面，传入的参数有detail，releaseTime。
深色代码主题
复制
.onClick(() => {
  this.pathStack.pushPathByName("MessageDetail",{ detail: item, releaseTime: newsItem.timePoint } as MessageDetailParam)
})

工程目录

深色代码主题
复制
entry/src/main/ets/
|---common
|   |---model         
|   |   |---ListItemAdapter.ets    // 数据处理
|   |---util         
|   |   |---utilClass.ets          // 结构
|---components
|   |---HeaderNav.ets              // 导航头部
|   |---Message.ets                // 消息
|---entryability
|   |---EntryAbility.ets
|---entrybackupability
|   |---EntryBackupAbility.ets                
|---pages
|   |---AppListMessage.ets         // 列表
|   |---Index.ets                  // 主页
|   |---MessageCenter.ets          // 消息中心
|   |---MessageDetail.ets          // 消息细节
|   |---MessageSetting.ets         // 消息设置
|   |---SystemMessage.ets          // 系统消息

约束与限制

  • 手机ROM版本：ALN-AL00 5.0.0.102(SP8C00E73R4P17logpatch02)
  • IDE：DevEco Studio 5.0.3.910
  • SDK：HarmonyOS 5.0.0 Release（API 12）
</markdown>

更多关于HarmonyOS 鸿蒙Next 应用消息列表场景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
1 回复

更多关于HarmonyOS 鸿蒙Next 应用消息列表场景的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next应用消息列表场景中，开发者需关注消息的高效展示与用户交互的流畅性。消息列表作为用户接收应用通知的核心界面，其设计需遵循直观、易用原则。

首先，确保消息列表能够实时更新，通过鸿蒙系统提供的API接口，实现消息数据的快速同步。同时，采用分页加载机制，避免一次性加载过多数据导致界面卡顿。

其次，优化消息展示格式，确保每条消息内容清晰、易于识别。可通过字体大小、颜色等视觉元素区分消息类型与紧急程度，提升用户阅读体验。

再者，强化用户交互体验。允许用户对消息进行快速操作，如标记已读、删除、回复等，减少用户操作步骤。同时，提供消息筛选与搜索功能，帮助用户快速定位所需信息。

此外，考虑到消息列表可能涉及用户隐私，开发者需严格遵守鸿蒙系统的隐私保护政策，确保用户数据安全。

最后，进行充分的测试，确保消息列表在不同设备、不同网络环境下的稳定性与兼容性。

如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部