第四百二十八回 chat_bubbles包简介

talk_8

已于 2024-04-21 12:52:56 修改

阅读量790

点赞数 27

分类专栏：一起Talk Flutter吧文章标签：移动开发Flutter chat_bubbles包聊天窗口聊天式图片

于 2024-03-28 21:23:09 首次发布

本文链接：https://blog.csdn.net/talk_8/article/details/137124900

版权

一起Talk Flutter吧专栏收录该内容

416 篇文章 7 订阅

订阅专栏

文章目录

1. 概念介绍
2. 思路与方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"buble包"相关的内容，本章回中将 介绍chat_bubbles包.闲话休提，让我们一起Talk Flutter吧。

1. 概念介绍

我们在本章回中介绍的chat_bubbles包是一个三方插件，它用来实现类似聊天窗口的功能，常见的使用场景就是微信聊天窗口。通常我们使用Container组件实现窗口，然后通过修改Container组件的属性来实现带有圆角，背景，边框粗细等效果的窗口。不过如果想在窗口边上加一个箭头，实现类似聊天窗口的效果，Container组件就无能为力了，因此我们决定到pub库中找一些三方插件，于是便找到了chat_bubbles包，该包在pub上的评价不错。我们将在本章回中详细介绍该包的功能和用法，以及如何通过该包实现聊天窗口功能。

2. 思路与方法

2.1 组件及属性

包中提供了BubbleSpecialThree组件，我们可以通过该组件的属性来实现聊天窗口功能，下面是常用的属性：

color属性：用来控制是否聊天窗口的背景颜色；
tail属性：该属性是bool类型,用来控制是否显示箭头；
text属性：用来控制聊天窗口的内容，注意它是String类型；
sent属性：该属性是boo类型，用来控制是否在窗口最右侧显示一个对号；
seen属性：该属性是boo类型，用来控制是否在窗口最右侧显示一个对号；
delivered属性：该属性是boo类型，用来控制是否在窗口最右侧显示一个对号；

上面介绍的这些属性中最后三个属性都可以控制对号，不过它们控制的对号表达的含义不同，比如sent表示聊天消息已经发送成功，seen表示已经阅读聊天内容。

2.2 实现方法

上面的小节中介绍了包中的组件及其属性，那么如何实现聊天窗口功能呢？其实很简单，只要把文本内容赋值给BubbleSpecialThree组件的text属性就可以，它就是聊天窗口中的内容，BubbleSpecialThree组件会在该文本周围绘制一个聊天窗口，至于窗口的背景颜色，箭头位置等可以通过BubbleSpecialThree组件的属性来控制，不过我们无法修改聊天窗口的形状和边框风格(比如边框颜色，边框粗细等)。

2.3 功能扩展

实现聊天窗口只是chat_bubbles包的一部分功能，该包还可以在聊天窗口中添加图片和声音。为此包中还提供了其它的组件，比如BubbleNormalImage组件，我们只需要把Image组件赋值给它的image属性就可以看到图片周围环绕了一个聊天窗口。添加声音的方法也类似，我们在这里就不做详细介绍了，大家可以参考官方文档。

3. 示例代码

 const BubbleSpecialThree(
  ///是否显示箭头nip
  tail: true,
 ///会在最右侧显示一个对号
  sent:false ,
  delivered: true,
  seen: true,
  ///窗口的背景颜色
  color: Colors.yellow,
  text: "chat_bubble window"),

///可以在图片，audio外层嵌套bubble，并且对它们进行控制,
BubbleNormalImage(id: "001", image: const Icon(Icons.favorite),
  tail: true,
  color: Colors.lightGreenAccent,
  onTap: (){},
),