HarmonyOS鸿蒙Next实现应用消息列表示例代码

HarmonyOS鸿蒙Next实现应用消息列表示例代码

介绍

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

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

实现应用消息列表源码链接

效果预览

图片名称

使用说明

  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)
})

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

2 回复

在HarmonyOS鸿蒙Next中，实现应用消息列表可以通过使用ListContainer组件来展示消息条目。以下是一个简单的示例代码，展示如何在鸿蒙Next中实现一个基本的消息列表。

import { ListContainer, ListItem, Text, UIAbility, Want } from '@ohos.ability';

export default class MessageListAbility extends UIAbility {
  private listContainer: ListContainer;

  onWindowStageCreate(windowStage: any) {
    let window = windowStage.getMainWindow();
    window.loadContent('pages/index', (err, data) => {
      if (err) {
        console.error('Failed to load the content. Cause: ' + JSON.stringify(err));
        return;
      }
      this.listContainer = window.findComponentById('listContainer') as ListContainer;
      this.initList();
    });
  }

  private initList() {
    let messages = [
      { id: 1, content: 'Hello, HarmonyOS!' },
      { id: 2, content: 'This is a message list example.' },
      { id: 3, content: 'You can add more messages here.' }
    ];

    messages.forEach(message => {
      let listItem = new ListItem(this.context);
      let text = new Text(this.context);
      text.setText(message.content);
      listItem.addComponent(text);
      this.listContainer.addItem(listItem);
    });
  }
}

在这个示例中，我们创建了一个MessageListAbility类，并在onWindowStageCreate方法中加载了一个包含ListContainer的页面。ListContainer是鸿蒙Next中用于展示列表的组件。我们通过initList方法初始化了一些消息数据，并将它们添加到ListContainer中。

每个消息条目通过ListItem组件来展示，Text组件用于显示消息内容。最后，我们将这些ListItem添加到ListContainer中，从而实现了消息列表的展示。

这个示例代码展示了如何在HarmonyOS鸿蒙Next中实现一个简单的消息列表，适用于基础的列表展示需求。

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


在HarmonyOS（鸿蒙）中，你可以使用ListContainer和ListContainer.ItemProvider来实现一个简单的消息列表。以下是一个示例代码：

import ohos.agp.components.*;
import ohos.agp.utils.LayoutAlignment;
import ohos.app.Context;
import ohos.app.ability.UIAbility;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;

public class MainAbility extends UIAbility {
    private static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00201, "MainAbility");

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        DirectionalLayout layout = new DirectionalLayout(this);
        layout.setAlignment(LayoutAlignment.CENTER);

        ListContainer listContainer = new ListContainer(this);
        listContainer.setItemProvider(new MessageListProvider());

        layout.addComponent(listContainer);
        super.setUIContent(layout);
    }

    private class MessageListProvider extends BaseItemProvider {
        private String[] messages = {"消息1", "消息2", "消息3", "消息4"};

        @Override
        public int getCount() {
            return messages.length;
        }

        @Override
        public Object getItem(int i) {
            return messages[i];
        }

        @Override
        public long getItemId(int i) {
            return i;
        }

        @Override
        public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
            Text text = new Text(getContext());
            text.setText(messages[i]);
            text.setTextSize(50);
            return text;
        }
    }
}

这个示例代码展示了如何在HarmonyOS中创建一个简单的消息列表。ListContainer用于显示列表，MessageListProvider负责提供列表项的数据和视图。你可以根据需要扩展和修改这个示例。

回到顶部