【Flutter】微信项目实战【08】 聊天界面搭建(上)

·  阅读 616
【Flutter】微信项目实战【08】 聊天界面搭建(上)

「这是我参与11月更文挑战的第15天,活动详情查看:2021最后一次更文挑战

📝【Flutter】学习养成记,【程序员必备技能】

📔【Flutter】微信项目实战!

1. 写在前面

上篇文章中已经对微信通讯录界面的索引条进行布局和代码实现,那么今天就继续来写微信实战项目的聊天界面!

聊天列表.gif

2. 导航栏右边按钮实现

我们先来实现一下,聊天界面的导航栏部分,实现之前我们先来看看普通的界面长啥样子,如下如所示:

聊天界面

AppBar里面有个属性actions,这里就是设置导航栏上面的一些按钮的。我们现在要实现的是聊天界面,导航栏右边的按钮被点击,会出现如下效果:

下拉框

这种下拉框,在之前的博客中也介绍过,有不清楚的请移步【Flutter】基础组件【07】Appbar去了解,这里就不过多赘述了。

这种下拉框我们不需要自己实现,系统就提供了一个PopupMenuButton,我们拿来直接用就可以了。代码布局如下图所示:

代码布局

  • color: 下拉框的背景颜色
  • offset:下拉框距离导航栏的偏移量
  • child:是指导航栏上按钮,就是你要点击的那个按钮
  • temBuilder:这个是下拉框里面的内容了
  • PopupMenuItem:这个是下拉框里面的每个 item,是一个Widget

PopupMenuItemitem 要显示什么样的内容,样式是可以自定义的,我们这里封装了一下,取名为_popupMenuItem如下代码所示:

Widget _popupMenuItem(String imgAss, String title) {
    return Row(
      children: [
        Image(
          image: AssetImage(imgAss),
          width: 25,
        ),
        const SizedBox(
          width: 20,
        ),
        Text(
          title,
          style: const TextStyle(fontSize: 18, color: Colors.white),
        )
      ],
    );
  }
复制代码

话不多说,我们直接看效果,如下如所示:

下拉框 那么下拉框就已经实现了,有个性需求的可以自己去封装自定义一下样式、颜色等。那么现在就去实现聊天的列表吧!

3. 列表实现

聊天界面的列表我这里就不自定义 cell 了,直接使用ListView里面放ListTile来简单实现一下,聊天界面的效果。

聊天页面代码

这个ListTile相当于默认的 cell 了,里面也有一些属性,如:

  • title:标题,我们这里可以用来设置昵称
  • subtitle:子标题,我们这里可以使用其来设置聊天的内容
  • leading:是展示在title之前的一个 widget,我们这里用来展示用户的头像

聊天界面

上图是聊天界面的效果展示,这里写了固定的昵称和聊天内容,还有头像,只是为了简化,达到基本的效果。当然你也可以自定义 cell 来丰富显示效果。

以上就是本篇博客的全部内容,有兴趣的老铁可以自己动手实现一下,也欢迎大家留言交流。更详细的代码请移步这里👉GitHub项目地址

4. 写在后面

关注我,更多内容持续输出

🌹 喜欢就点个赞吧👍🌹

🌹 觉得有收获的,可以来一波 收藏+关注,以免你下次找不到我😁🌹

🌹欢迎大家留言交流,批评指正,转发请注明出处,谢谢支持!🌹

  • 基础语法合集

【Flutter】Dart中的var、final 和 const基本使用

【Flutter】Dart数据类型之num

【Flutter】Dart数据类型之String

【Flutter】Dart的数据类型list&Map(数组和字典)

【Flutter】Dart的方法与箭头函数

【Flutter】Dart的方法中的可选参数、方法作为参数传递

【Flutter】Dart中的匿名函数、闭包

【Flutter】Dart中的类和对象

【Flutter】Dart中的构造函数

【Flutter】Dart的工厂构造方法&单例对象&初始化列表

【Flutter】Dart的类方法和对象操作符

【Flutter】Dart中的继承

【Flutter】Dart中的抽象类和接口

【Flutter】Dart中的Mixins混入你知道是什么吗?

  • [基础组件合集]

【Flutter】基础组件【01】Text

【Flutter】基础组件【02】Container

【Flutter】基础组件【03】Scaffold

【Flutter】基础组件【04】Row/Column

【Flutter】基础组件【05】Image

【Flutter】基础组件【06】Icon

【Flutter】基础组件【07】Appbar

【Flutter】基础组件【08】BottomNavigationBar

【Flutter】基础组件【09】Button

  • [项目实战合集]

【Flutter】微信项目实战【01】基本框架搭建

【Flutter】微信项目实战【02】我的界面搭建(上)

【Flutter】微信项目实战【03】我的界面搭建(下)

【Flutter】微信项目实战【04】发现界面搭建

【Flutter】微信项目实战【05】 通讯录界面搭建(上)

【Flutter】微信项目实战【06】 通讯录界面搭建(中)

【Flutter】微信项目实战【07】 通讯录界面搭建(下)

分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改