第四百二十六回 flutter_chat_bubble包简介

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

1. 概念介绍

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

2. 思路与方法

2.1 组件及属性

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

• child属性：用来控制聊天窗口中的内容；
• alignment属性：可以控制窗口上面箭头的位置；
• clipper属性：用来控制窗口的形状，边框颜色；

上面的这三个属性中前两个属性比较好用，第三个属性比较麻烦，它是包中自定义的类型，包中一共提供了九个这样的类型，命名为ChatBubbleClipper1-9.这九个类可以创建不同形状的窗口，不过它们的用法都一样，接下来我们单独介绍类中的属性，详细如下：

• type属性：用来控制窗口的形状，分发送和接收两个类型；
• radius属性：用来控制窗口周围圆角的大小；
• nipWidth属性：用来控制箭头的宽度；
• nipHeight属性：用来控制箭头的高度；

上面的这些属性中只有第一个属性是包中自定义的类型，其它属性的类型都是double类型，我们不再单独介绍这些类型，因为它们使用十分方便，看下示例代码就能明白。如何给这些属性赋值呢？我们将在后面的小节中通过示例代码来演示。

2.2 实现方法

上面的小节中介绍了包中的组件及其属性，那么如何实现聊天窗口功能呢？其实很简单，只要把Text组件赋值给ChatBubble组件的child属性就可以，聊天的内容就是Text组件显示的文本，ChatBubble组件会在该文本周围绘制一个聊天窗口，至于窗口的形状，箭头位置等可以通过ChatBubble组件的属性来控制。

3. 示例代码

ChatBubble(
  clipper: ChatBubbleClipper1(type: BubbleType.sendBubble,),
  alignment: Alignment.topRight,
  child: const Text("ChatBuble Window"),
),
ChatBubble(
  clipper: ChatBubbleClipper2(type: BubbleType.sendBubble,nipWidth: 50,nipHeight: 30),
  alignment: Alignment.topRight,
  child: const Text("FlutterChatBubble Window"),
),

上面的示例代码演示了如何创建聊天窗口，我们在代码中创建了两个聊天窗口，这两个聊天窗口的形状不同，因为我们使用了不同的类，这点从代码中可以看到，但是它们的用法十分相似。

代码中只演示了两种窗口类型，剩下的七种类型大家可以到官方网站去查看，不过我还是建议大家自己动手去实践。这样可以真正体会到如何配置聊天窗口。

下面是聊天窗口的效果图，图中第二个和第三个聊天窗口就是示例代码运行生成的效果图，从中可以看出窗口的形状不一样。目前已经介绍了图中前三个聊天窗口，我们将在后面章回中介绍其它的聊天窗口。

4. 内容总结

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

• flutter_chat_bubble包提供了ChatBubble组件来实现聊天窗口功能；
• 聊天窗口通过ChatBubble组件的clipper属性来实现，窗口中的内容通过该组件的child属性来实现；
• ChatBubble组件的clipper属性是包中自定义的类型，一共九种，不同的类用来创建不同形状的聊天窗口；

看官们，与"flutter_chat_bubble包简介"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!