鸿蒙开发之ArkUI 界面篇 二十九 新闻列表

 如下的一个新闻列表：

首先分析需求，每一条新闻就是一个Item，每一条item由两条数据组成，分别是标题和时间，他们是垂直关系，所以组件构成是Colum+Text+Text，这里有一条分割线，下图红框处

初步想法可能是使用Text不要文字来实现，这里有一个更简洁的写法，border实现，指定为底部。

那数据来源是新闻列表的数组，为了超出屏幕高度还能显示，最外层加Scroll，又因为数据是会变的，所以数组需要加@State来修饰。文章对象定义

interface Article {
  title: string
  createTime: string
}

文章数组:

@State articles: Article[] = [
  {
    title: '近200+自动驾驶数据集全面调研！一览如何数据闭环全流程近200+自动驾驶数据集全面调研！一览如何数据闭环全流程',
    createTime: '2024-01-31 09:59:43'
  },
  {
    title: 'MySQL Shell 8.0.32 for GreatSQL编译二进制包',
    createTime: '2024-01-31 09:55:53'
  },
  {
    title: '在Redis中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },

  {
    title: '在Redis中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },

  {
    title: '在Redis中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },

  {
    title: '在Redis中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },

  {
    title: '在Redis中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },

  {
    title: '在Redis中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },

  {
    title: '在Redisddd 中如何实现分布式事务的一致性？',
    createTime: '2024-01-31 09:54:51'
  },
]

整个代码实现如下：

interface Article {
  title: string
  createTime: string
}
@Entry
@Component
struct Index {

  @State articles: Article[] = [
    {
      title: '近200+自动驾驶数据集全面调研！一览如何数据闭环全流程近200+自动驾驶数据集全面调研！一览如何数据闭环全流程',
      createTime: '2024-01-31 09:59:43'
    },
    {
      title: 'MySQL Shell 8.0.32 for GreatSQL编译二进制包',
      createTime: '2024-01-31 09:55:53'
    },
    {
      title: '在Redis中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },

    {
      title: '在Redis中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },

    {
      title: '在Redis中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },

    {
      title: '在Redis中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },

    {
      title: '在Redis中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },

    {
      title: '在Redis中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },

    {
      title: '在Redisddd 中如何实现分布式事务的一致性？',
      createTime: '2024-01-31 09:54:51'
    },
  ]

  build() {
    Scroll() {
      Column() {

        ForEach(this.articles, (item: Article, index: number) => {

          // 单个新闻结构
          Column() {
            Text(item.title)
              .width('100%')
              .fontSize(15)
              .fontColor('#303030')
              .lineHeight(20)
            Text(item.createTime)
              .margin({top: 15})
              .width('100%')
              .fontSize(12)
              .fontColor('rgb(192, 192, 192)')
          }
          .padding({top: 15, bottom: 15})
          .width('100%')
          .border({
            width: {bottom: 2},
            color: {bottom: '#f4f4f4'}
          })
        })
      }
      // .constraintSize({
      //   minHeight: '100%'
      // }) //当子组件占用空间超过设置的约束值时，会显示滚动条。
    }
    .padding({ left: 13, right: 13 })
    .width('100%')
    .height('100%')
  }
}

总结：鸿蒙开发中数据变化UI就需要跟着变化，这时候的数据只需@State修饰变量就好，Scroll能在垂直方向实现超出屏幕能够滚动看见，分割线用boder属性实现，对象的定义关键字是interface，多条数据需要的容器是是数组。