鸿蒙NEXT开发笔记（二）仿微信聊天App的挚友列表

上一节我们实现了仿微信的登录界面，那么登录成功打开微信主界面，起首就会看到挚友列表页面。列表是一组具有相似风格的组件元素集合，可以从上往下顺序排列，也可以从左往右顺序排列。鸿蒙App采取List组件用作列表，全部基于列表的界面布局能够通过List实现。下面具体介绍怎样利用List组件实现仿微信的挚友列表界面。
1、声明列表元素的数据泉源

列表内部元素的风格相似，这要求泉源数据也具备相同的结构，比如鸿蒙SDK自带了名叫SelectOption的选项结构。该结构包含字符串和图标两个字段，非常实用于挚友列表。
由于挚友列表要求数组类型，因此挚友数组的数据类型采取SelectOption[]，并且挚友列表会动态革新，所以要给挚友数组添加“@State”前缀表示该变量答应组件绑定。如此一来，挚友数组的声明代码示比方下：

1. @State friendArray: SelectOption[] = [
2.   { value: '水星', icon: $r('app.media.shuixing') },
3.   { value: '金星', icon: $r('app.media.jinxing') },
4.   { value: '地球', icon: $r('app.media.diqiu') },
5.   { value: '火星', icon: $r('app.media.huoxing') },
6.   { value: '木星', icon: $r('app.media.muxing') },
7.   { value: '土星', icon: $r('app.media.tuxing') }]

复制代码

2、挚友列表的团体框架

鸿蒙App采取声明式UI，使得代码拿不到组件的实例，可是有时又需要让组件实行某种动作，比如列表组件List可能会滚动到顶部或者滚动到底部，像这种滚动操纵要求提前给List绑定滚动器对象，方便后面由滚动器实行具体的滚动操纵。比如下面代码就声明了一个List组件的滚动器对象：

1. scroller: Scroller = new Scroller() // 滚动器

复制代码

声明式UI设置List组件的属性有两种途径，一种是在List的构造方法中传入待设置的属性，主要包罗下列三种初始属性：
space：子组件在主轴方向的间隔，也就是各列表元素的间距，默以为0。
initialIndex：设置当前List初次加载时视口起始位置显示的item的索引值。默以为0。
scroller：设置可滚动组件的控制器，也就是List组件的滚动器对象。
设置List属性的另一种途径是调用对应的方法，常用的List属性设置方法如下：
listDirection：设置组件的排列方向。Axis.Vertical表示垂直排列，Axis.Horizontal表示水平排列。
scrollBar：设置滚动条状态。默以为BarState.Auto表示显示滚动条，为BarState.Off表示关闭滚动条。
divider：设置ListItem分割线样式，默认无分割线。这里可设置分割线的宽度、颜色、左边距和右边距。
edgeEffect：设置边缘滑动结果。默以为EdgeEffect.Spring表示有回弹有阴影，为EdgeEffect.Fade表示无回弹有阴影。
下面是在ArkUI中显示挚友列表的List组件框架代码：

1. List({ space: 5, initialIndex: 0, scroller: this.scroller }) {
2.   // 这里暂时省略内部组件的代码
3. }
4. .listDirection(Axis.Vertical)
5. .scrollBar(BarState.Off)
6. .divider({ strokeWidth: 2, color: 0xcccccc, startMargin: 20, endMargin: 20 })
7. .edgeEffect(EdgeEffect.Fade)
8. .width('100%').padding(5)

复制代码

3、挚友列表的内部排列

有了List组件框架之后，再往内部添补具体的列表元素信息。声明式UI仅支持采取ForEach的循环语句，以及采取if的分支语句。此中ForEach语句需要指定命组变量，并设置单个数组元素的组件排列。这里的挚友列表数据来自前面第一步声明的friendArray数组，单个列表元素的组件以ListItem开头，且ListItem组件只能有唯一的下级节点。
对于挚友列表的每个挚友来说，挚友头像在左边，挚友昵称在右边，为此单个挚友可采取Row容器，内部依次排列Image组件（对应头像）和Text组件（对应昵称）。此外，点击每项挚友会打开与该挚友的聊天界面，所以还要给Row组件添加onClick方法来响应点击事件，留意跳转时携带本身的昵称以及对方的昵称。
综合以上的挚友列表展示要求，可编写如下的ForEach语句，给每个挚友分配单独的ListItem及其对应的下级节点Row，以及Row内部的组件排列与点击动作，具体的循环遍历代码如下：

1. ForEach(this.friendArray, (item: SelectOption) => {
2.   ListItem() {
3.     Row() {
4.       Image(item.icon).width(60).objectFit(ImageFit.Contain)
5.       Blank().width(15)
6.       Text(item.value.toString())
7.         .width('100%').height(30).fontSize(18)
8.         .textAlign(TextAlign.Start)
9.     }
10.     .onClick(() => {
11.       router.pushUrl({
12.         url: 'chat/FriendChatPage',
13.         params: {
14.           nickName: this.nickName,
15.           friendName: item.value.toString(),
16.         }
17.       })
18.     })
19.   }
20. })

复制代码

4、给挚友列表添加滚动动作

鸿蒙App加载挚友列表之后，默认从挚友列表的顶端开始展示，如果想快速跳到列表的底部，可以调用前面第二步滚动器scroller的滚动方法scrollEdge。给scrollEdge传入的滚动方向为Edge.Bottom时，表示向底部滚动；为Edge.Top时，表示向顶部滚动。scrollEdge方法的velocity参数表示滚动速率，单位每秒多少vp。下面是个让List组件自动滚动的代码例子：

1. // 滚动到底部
2. scrollToBottom() {
3.   setTimeout(() => {
4.     this.scroller.scrollEdge(Edge.Bottom, {velocity: 250})
5.   }, 100)
6. }

复制代码

综合以上的列表布局代码，实现的仿微信挚友列表界面如下：

下一篇文章会介绍怎样实现微信主界面的底部标签栏。

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。