【Flutter】微信项目实战【08】 聊天界面搭建(上)
1. 写在前面
在上篇文章中已经对微信通讯录
界面的索引条
进行布局和代码实现,那么今天就继续来写微信实战项目的聊天
界面!
2. 导航栏右边按钮实现
我们先来实现一下,聊天界面的导航栏部分,实现之前我们先来看看普通的界面长啥样子,如下如所示:
在
AppBar
里面有个属性actions
,这里就是设置导航栏上面的一些按钮的。我们现在要实现的是聊天界面,导航栏右边的按钮被点击,会出现如下效果:
这种下拉框,在之前的博客中也介绍过,有不清楚的请移步【Flutter】基础组件【07】Appbar去了解,这里就不过多赘述了。
这种下拉框我们不需要自己实现,系统就提供了一个
PopupMenuButton
,我们拿来直接用就可以了。代码布局如下图所示:
color
: 下拉框的背景颜色offset
:下拉框距离导航栏的偏移量child
:是指导航栏上按钮,就是你要点击的那个按钮temBuilder
:这个是下拉框里面的内容了PopupMenuItem
:这个是下拉框里面的每个item
,是一个Widget
PopupMenuItem
的 item
要显示什么样的内容,样式是可以自定义的,我们这里封装了一下,取名为_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 来丰富显示效果。
以上就是本篇博客的全部内容,有兴趣的老铁可以自己动手实现一下,也欢迎大家留言交流。更详细的代码请移步这里
【Flutter】微信项目实战【08】 聊天界面搭建(上)相关推荐
- Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目
Vue整合SpringBoot项目实战之Vue+Element-Ui搭建前端项目 源码(欢迎star): 前端项目代码 后端项目代码 系列文章: Vue整合SpringBoot项目实战之后端业务处理 ...
- React全Hook项目实战在线聊天室历程(三):加个音乐直播?
前情提要: React全Hook项目实战在线聊天室历程(一):基本功能 React全Hook项目实战在线聊天室历程(二):引用与话题功能 正文 聊天应该有什么?背景音乐,茶与酒,零食,后两个我是没法实 ...
- 微信小程序开发—项目实战之聊天机器人
项目功能介绍 人工智能虚拟机器人"微软小冰"大家玩过吧,很酷的一个应用.发送文字.语音和图片都能得到智能的回复. 那现在我们就用小程序做一个模拟的应用,智能聊天机器人.发送文字它可 ...
- Flutter商城项目实战(商品分类)
Flutter是Google(全球顶级互联网科技公司)的生的,后台够硬,毫无疑问Flutter即将或已经成为跨平台开发的主流,Flutter野心很大,不仅冲击着原生开发,而且很有可能会烧到Web前端. ...
- 【SSH网上商城项目实战】之环境搭建填坑
此篇主要是记录我在从零开始走一遍倪升武大神的[SSH网上商城项目实战]过程中遇到的一些坑并记录解决方法.关于这个项目,大家可以去倪升武的博客学习了解,SSH网上商城项目实战请戳倪升武的项目实战专题. ...
- .net core项目实战之开发环境搭建
在上一篇[.net core项目实战之回顾总结]主要介绍了项目背景和自己的一些想法,从本篇开始正式叙述整个开发过程,本篇主要介绍一下开发前的环境准备,vs2017和docker的安装与配置 系统要求 ...
- Flutter企业级项目实战——博时App
| 前言 在当前大前端愈演愈烈的情况下,前有大名鼎鼎的QT.Facebook的RN.阿里的Weex,后有不断追赶的Flutter及原生+H5混合开发,大家都想要在跨平台这碗饭上夺取饭碗.在这种趋势下, ...
- EChat(简易聊天项目)三、聊天界面UI实现
一.添加部分控件完善登入过程 ① 设计应用登录界面加入ImageView 在login_layout.xml中加入以下代码 <?xml version="1.0" encod ...
- 项目实战:《智慧线上购物商城》:基于vue3+vite+vant4组件(一)
本项目主要是基于vue3和vite以及vant4组件所开发的移动端购物商城.项目没有接口,所运用的存储数据为json数据通过axios请求,以及Localstorage等技术实现数据. 开发的模型参考 ...
- React Native商城项目实战08 - 设置“More”界面cell
1.自定义可复用的cell More/CommonCell.js: /*** 自定义可复用的cell*/ import React, { Component } from 'react'; impo ...
最新文章
- 机器学习系列 1:监督学习和无监督学习
- 一个把ListString转化为以,隔开的字符串的方法
- Spring Boot 2.2.0 正式发布,大幅性能提升 + Java 13 支持
- 大部分公司并不需要微服务
- 计算机主机内部防尘装置,一种计算机主机用防尘装置的制作方法
- 记一次 .NET 某流媒体独角兽 API 句柄泄漏分析
- POJ 1745 Divisibility【DP】
- kafka集群 kubernetes_为什么 Kubernetes 如此受欢迎?
- java spring server_Java server框架之(1):spring中的IoC
- mysql 去除重复 Select中DISTINCT关键字的用法(查询两列,只去掉重复的一列)
- 我见过不少赚了钱,投资孵化一堆店铺的,一般而言后续发展都会出问题的
- CSS常用选择器简析(带简单案例)
- ffmpeg之YUV420P转RGB24
- @async 注解使主线程不等待
- 交通事故的处理流程有什么规定
- java mysql 订单表设计
- 制作JavaCV应用依赖的基础Docker镜像(CentOS7+JDK8+OpenCV4)
- [转]深度剖析闪电网络
- svchost.exe占用cpu100 的解决方法
- 牛腩新闻发布--过程或函数 'news_selectByCaId' 需要参数 '@caid',但未提供该参数(二)
热门文章
- 任务26:dotnet watch run 和attach到进程调试
- 雾里看花之 Python Asyncio
- spring cloud中微服务之间的调用以及eureka的自我保护机制
- No.1 - 制作一个简单的菜单动画效果---百度IFE
- JCE, Java Cryptography Extension
- Hardware Emulation Platform (硬件仿真平台) 在IC验证中的运用情况如何?
- java ArrayListLinkList
- linux-2.6.22.6 内核源代码包的文件目录介绍
- 63. (FileInputStream)输入字节流
- Sequence Diagram时序图 - 应该是最简洁有力的业务了