第四百七十一回

我们在上一章回中介绍了"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: (){},
),

上面的示例代码演示了如何创建一个聊天窗口，我们在代码中添加了详细的注释，这样方便大家理解代码。我建议大家自己动手编写代码，至少修改一下代码中的属性值，
这样可以真正体会到如何配置聊天窗口。此外，我们还创建了一个聊天风格的图片，下面是聊天窗口的效果图，图中第五个聊天窗口就是示例代码运行生成的效果图，第六
个聊天窗口就是带有聊天风格的图片，不过我们没有放图片，而是使用一个Icon组件来代替。目前为止，我们已经介绍了效果图中所有的聊天窗口。

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• chat_bubbles包提供了BubbleSpecialThree组件来实现聊天窗口功能；
• 聊天窗口由组件来实现，窗口中的内容通过该组件的text属性来实现；
• chat_bubbles包还提供了其它组件，用来实现聊天式的图片和声音；
  看官们，与"chat_bubbles包简介"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!