【ARK UI】HarmonyOS 如何实现新闻列表_harmony开发新闻页面

 参考资料

初识Component

构建食物列表List布局

List

ListItem

代码实现

1、准备数据

构造数据源，新闻列表包含“新闻的id”、“新闻图片”、“新闻标题”、“新闻的内容”四个内容，字段表示如下

新闻的id：id

新闻图片：ImageUrl

新闻标题：Title

新闻内容：Content

构造数据集合如下

  private arr: any[] = [
    {
      ImageUrl:$r('app.media.icon'),
      Title:"认识HarmonyOS",
      Content:"了解HarmonyOS的系统定位、架构、技术特性等。",
      id:"0"
    },
    {
      ImageUrl:$r('app.media.icon'),
      Title:"准备开发环境",
      Content:"安装开发工具，并配置相关开发环境",
      id:"1"
    },
    {
      ImageUrl:$r('app.media.icon'),
      Title:"开发Ability",
      Content:"Ability是HarmonyOS应用程序的重要组成部分",
      id:"2"
    },
    {
      ImageUrl:$r('app.med