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