OpenHarmony开发者论坛

标题: 列表页构建（标题加图标） [打印本页]

作者: 深开鸿-唐艺丹 时间: 2024-10-31 16:15
标题: 列表页构建（标题加图标）
[md]### **列表页构建（文字加图标）**

`List`组件实现效果如下图所示：

![wps1.jpg](https://forums-obs.openharmony.c ... otkdud8t52dow6l.jpg "wps1.jpg")

---

### 具体步骤

首先构建整个 `List`中的每一条 `Listitem`，我们的计划是 `List`中的每一条 `Listitem`由文字 `Text`和图标 `Image`组成，其中文字 `Text`由一个标题+一个日期组成。

因为文字 `Text`由一个标题+一个日期组成，所以也要填充 `Text`文本所需要的内容，这里是构建了一个标题+一个日期，通过构造 `class`来定义标题和日期这两个属性。

```
export default class New {
  title: string
  time: string

  constructor(title: string, time: string) {
   this.title = title
   this.time = time
  }
}

```

通过名为 `list`的数组属性来导入所需的文本，该数组用于存储 `New`类型的元素。

```
export default struct NewList {

  @State list:Array<New>=new Array

  aboutToAppear(){
   this.list.push(new New("这是标题1","07/12"))
   this.list.push(new New("这是标题2","07/19"))
   this.list.push(new New("这是标题3","07/20"))
   this.list.push(new New("这是标题4","07/21"))
   this.list.push(new New("这是标题5","07/22"))
   this.list.push(new New("这是标题6","07/23"))
  }
```

最后构建整体，用 `ForEach`来实现对每一条的构建。

```
  build() {
   Column() {
   List() {
   ForEach(this.list, (item: New) => {
   ListItem() {
   Row() {
   Column() {
   Text(item.title)
   .fontSize(21)
   .textAlign(TextAlign.Start)
   Text("  日期：" + item.time)
   .fontSize(12)
   }
   .width('80%')
   Image($r('app.media.startIcon'))
   .width(40)
   .height(40)
   .margin(10)
   }
   .height(60)
   }
   })
   }
   }
   .width('100%')
   .height('100%')
  }
```
[/md]

欢迎光临 OpenHarmony开发者论坛 (https://forums.openharmony.cn/)