我们在上一章回中介绍了"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包简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!