首页 > 其他分享 >绘制bubble的三方包

绘制bubble的三方包

时间:2024-06-03 23:00:50浏览次数:26  
标签:三方 窗口 bubble 聊天 chat 组件 bubbles 绘制 属性

文章目录


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

标签:三方,窗口,bubble,聊天,chat,组件,bubbles,绘制,属性
From: https://blog.csdn.net/talk_8/article/details/139426328

相关文章

  • 《无双大蛇魔王再临》远吕志章三方原详细熟练度及武器情报
    转载自游民星空,方便自己看,侵删原作者:windy0429首先开场往右下寨击破[不破光治]→接着移动到中央下方出现伏兵[佐佐成政(300经).柴田胜定.津田信春]→再往左中央移动出现伏兵[泷川一益(300经).明智秀满.伊势贞兴]→往上攻取兵粮库[明智光秀(武器盒).稻叶一铁.氏家卜全]&伏......
  • 各类信息化项目第三方验收测试的作用
    验收测试各类信息化项目第三方验收测试的作用主要体现在以下几个方面:1.客观性:第三方验收测试的突出特点是其客观性。与项目开发团队或相关利益方相比,第三方测试机构能够更加客观地进行测试,不受项目具体背景、利益关系等因素的影响。这种客观性有助于确保测试结果的准确性......
  • 全国软件第三方测试的费用标准受哪些要素的影响
    第三方软件测试报告行业内对于第三方软件测试报告并没有一个明确的收费标准,不同地域之间的收费不同,各个检测单位的报价也略有差异。第三方检测报告的收费标准需要根据具体的测试需求而定,一般是按照项目大小或者测试功能点来收费的,价格区间一般是几千到几万不等。一、第三方......
  • WebGPU学习(11)--- 独立于 Canvas 绘制
    更多精彩内容尽在数字孪生平台,关注公众号:sky的数孪技术,技术交流、源码下载请添加VX:digital_twin123只想创建图像数据而不使用Canvas当使用WebGL时,我们始终必须从Canvas获取WebGL渲染上下文,因为渲染上下文与绘图目标紧密相关。但是WebGPU不一定需要Canvas来......
  • python 探测网络 并自动绘制ip拓扑图
    要实现网络探测并自动绘制IP拓扑图,你可以使用Python与相关库和工具来完成。一个流行的方法是使用Python的网络扫描库(例如Nmap或Scapy)来扫描网络,并使用网络图形库(例如NetworkX和Matplotlib)来绘制IP拓扑图。以下是一个粗略的步骤示例,展示了如何实现网络探测并自动绘制IP拓扑图:i......
  • python NetworkX和Matplotlib 来绘制IP拓扑图
    要使用NetworkX和Matplotlib来绘制IP拓扑图,首先需要使用NetworkX来构建图形,并在图形准备就绪后,使用Matplotlib绘制图形。以下是一个简单的示例,演示了如何使用NetworkX和Matplotlib来绘制IP拓扑图:importnetworkxasnximportmatplotlib.pyplotasplt#创建一个简单的示......
  • vue 引用第三方库 Swpier轮播图
    本文全程干货,没有废话1.使用npm安装swiper,使用save保存到packjson中npminstall--saveswiper2、把swiper看成是第三方库或者是组件,然后按照,引用,挂载组件,使用组件三步法。3、在script里的exportdefault上面引用这俩。import{Swiper,SwiperSlide......
  • Vulkan矩形绘制顺序小坑
    裁剪坐标不同:1.vulkan裁剪坐标Y朝下,所以下面矩形意义:staticstd::vector<Vertex>vertices={{{-0.5f,-0.5f,0},{1.0f,0.0f,0.0f}},//左上角{{0.5f,-0.5f,0},{0.0f,1.0f,0.0f}},//右上角{{0.5f,0.5f,0},{0.0f,0.0f,1.0f}},//右下角......
  • WinDbg 调试实战入门 - 调试第三方程序(记事本)
       专栏  ┇ 『Debug』『Debug』 上一篇  ┇ 《WinDbg源码级调试C++程序》WinDbg源码级调试C++程序_c++windbg调试经典项目解析-CSDN博客https://blog.csdn.net/weixin_41863029/article/details/138963604        在上一篇 《WinDbg源码级调......
  • 使用python绘制小提琴图
    使用python绘制小提琴图小提琴图效果代码小提琴图小提琴图(ViolinPlot)是一种结合了箱线图和核密度估计图的图形,用于显示数据分布的情况。它不仅展示了数据的四分位数、最大值和最小值,还通过密度曲线展示了数据的分布形状。相比于传统的箱线图,小提琴图可以提供更多关......