鸿蒙ArkTS+ArkUI仿微信消息列表页制作

先放一下页面效果：

第一步我们先定义一下数据格式，创建一个数据模型，通过图片，可以看到每一条数据的字段应当包括：头像，姓名，最新消息内容和最新消息的时间，创建一个model文件夹，然后在里面新建一个_Chat.ets文件

这里我使用的是interface来定义，当然也有很多人习惯class，类和接口的区别大概就是，interface里不包括代码，只是定义了一种实现规范

代码如下：

```javascript

export interface Info{

name:string

img:Resource

day:string

last:string

}

```

这里的头像img用的是Resource格式，因为我这里模拟演示的时候，用的是本地media文件夹里的图片，在实际项目中，也可以改成string，以对应网络url地址

第二步是模拟一组测试数据，我们在目录里创建一个data文件夹用来存放测试数据，然后创建一个_Chat.ets用来存放聊天的数据。因为是新的文件，所以在这个页面里，并没有对数据类型的定义，所以要先从刚才model文件那里把这个数据规范import过来，然后通过const创建一个数组，并通过as来确认这个数组里的每一个json数据都是同一个聊天数据的规范

代码如下：

```

import {Info} from '../model/_Chat'

export const Chatlist = [

{

name:"同学1",

img:$r("app.media.head1"),

day:"5月5日",

last:"今天上学怎么样？"

},

{

name:"同学2",

img:$r("app.media.head2"),

day:"5月5日",

last:"今天上学怎么样？"

}

] as Info[]

```

由于整体页面结构采用一个@Entry修改的页面+Tab来包裹的4个子组件的形式，因此继续在目录里创建一个views文件夹，用来存放表示一级页面的子组件，然后创建一个Home.ets作为首页

然后要通过import，来引入模拟数据和这个聊天的数据类型，代码如下

``` javascript

import {Chatlist} from '../data/_Chat'

import * as chat from '../model/_Chat'

```

然后创建一个@State描述的数据，作为数据列表

```

@State list:chat.Info[] = Chatlist;

```

最上面的首页标题，使用Row+Text来创建

```

Row() {

Text('首页')

.fontSize(20)

.fontWeight(FontWeight.Medium)

.fontColor('#333333')

}

.width('100%')

.height(56)

.justifyContent(FlexAlign.Center)

.backgroundColor('#f8f9fa')

.border({

width: { bottom: 1 },

color: '#e9ecef'

})

```

这里使用了justifyContent属性来进行居中，如果不加这个属性的话，那么100%宽度的row会让文字靠左显示。接下来是显示聊天数据的列表，这里采用ForEach列表渲染来实现。组件上的话，要考虑到多组数据的情况下是要上下滚动的，所以采用List+ListItem的组合比较合适，虽然说Scroll也能滚动，但是实际上我觉得套个List更加方便，我之前api6那会儿，写js开发鸿蒙的时候，也是用的这个方法。

然后页面中，最新的消息是给了一行的显示位置，然而实际上，很多情况下最新消息的字数可能会超过一行的限制，所以对于这个Text组件，要加上maxLines和textOverflow这两个属性，这两个属性表示最大行数和超出最大行数的话，内容如何显示，单独设置其中某一个是没有意义的。

这里的头像使用了圆形设计方案，当然这个头像的图片不可能直接上传成圆形的，这个是通过对于图片的borderRadius属性进行设置实现的，要把图片的宽度和高度设置成一样的数值，然后把borderRadius这个属性设置为高宽的一半

对于日期的设置上，可以看到日期是在每个组件的右上方的，但这不是通过position来固定的，而是和姓名在同一行里，然后通过设置这个row的justifyContent属性实现的，那么，这就要求，row的父组件的宽度，要正好是除了图片外的全部宽度，所以row的父组件即Column要加上layoutWeight属性，设置为1

这部分的代码如下：

```

List() {

ForEach(this.list, (item: chat.Info, index: number) => {

ListItem() {

Column() {

Row() {

// 头像

Image(item.img)

.width(50)

.height(50)

.borderRadius(25)

.margin({ right: 12 })

// 中间内容区域

Column() {

Row() {

// 姓名

Text(item.name)

.fontSize(16)

.fontWeight(FontWeight.Medium)

.fontColor('#1a1a1a')

// 日期

Text(item.day)

.fontSize(12)

.fontColor('#8e8e93')

}

.width('100%')

.justifyContent(FlexAlign.SpaceBetween)

.margin({ bottom: 4 })

// 最新消息

Text(item.last)

.fontSize(14)

.fontColor('#8e8e93')

.maxLines(1)

.textOverflow({ overflow: TextOverflow.Ellipsis })

.width('100%')

}

.layoutWeight(1)

.alignItems(HorizontalAlign.Start)

}

.width('100%')

.padding({ left: 16, right: 16, top: 12, bottom: 12 })

.alignItems(VerticalAlign.Center)

// 分割线

if (index < this.list.length - 1) {

Divider()

.strokeWidth(0.5)

.color('#e5e5e7')

.margin({ left: 78 })

}

}

}

.backgroundColor('#ffffff')

.onClick(() => {

// 跳转到聊天页面，传递姓名参数

router.pushUrl({

url: 'pages/Chat',

params: {

name: item.name

}

})

})

})

}

.layoutWeight(1)

.backgroundColor('#ffffff')

.scrollBar(BarState.Off)

.edgeEffect(EdgeEffect.Spring)

```