我们在上一章回中介绍了"多种Overlay组件的对比和总结"相关的内容,本章回中将介绍 bubble_box包.闲话休提,让我们一起Talk Flutter吧。
1. 概念介绍
我们在本章回中介绍的bubble_box
包是一个三方插件,它用来实现类似聊天窗口的功能,常见的使用场景就是微信聊天窗口。通常我们使用Container组件实现窗口,然后通过修改Container
组件的属性来实现带有圆角,背景,边框粗细等效果的窗口。不过如果想在窗口边上加一个箭头,实现类型聊天窗口的效果,Container组件就无能为力了,因此我们决到到pub库中找一些三方插件,于是便找到了bubble_box包,它是国内开发人员写的包,在pub上的评价也不错。我们将在本章回中详细介绍该包的功能和用法。
此外,我们在pub库中还找到其它的三包,这里先不提具体的名称,我们将在后面的章回中介绍。
2. 思路与方法
2.1 组件及属性
包中提供了BubbleBox
组件,我们可以通过该组件的属性来实现聊天窗口功能,下面是常用的属性:
- child属性:用来控制窗口中的内容;
- gradient属性:用来设置窗口背景颜色,可是纯色或者渐变色;
- shape属性:可以控制窗口的形状,边框颜色,窗口的箭头位置;
上面的这三个属性中前两个属性比较好用,第三个属性比较麻烦,它是BubbleBoxBorder类型,这个类型是包中提供的,我们需单独介绍类中的属性,详细如下:
- border属性:用来控制窗口边框的颜色,粗细和类型(实线或虚线);
- radius属性:用来控制窗口是否为圆角以及圆角的大小;
- position属性:用来控制窗口上面显示箭头的位置,比如中间等;
- direction属性:用来控制窗口上面显示箭头的方向,比如向上,向左;
- arrowAngle属性:用来控制箭头尖角的角度,值越大,角度越大;
上面的这些属性中只有最后一个是double
类型,其它属性的类型都是包中自定义的类型,我们不再单独介绍这些类型,因为它们使用十分方便,看下示例代码就能明白。如何给这些属性赋值呢?我们将在后面的小节中通过示例代码来演示。
2.2 实现方法
上面的小节中介绍了包中的组件及其属性,那么如何实现聊天窗口功能呢?其实很简单,只要把Text组件赋值给BubbleBox
组件的child属性就可以,聊天的内容就是Text组件显示的文本,BubbleBox组件会在该文本周围绘制一个聊天窗口,至于窗口的形状,边框颜色,箭头位置等可以通过BubbleBox
组件的属性来控制。
3. 示例代码
BubbleBox(
///box的形状,border用来控制边框颜色,radius用来控制边框角度,如果不设置默认是矩形
shape: BubbleShapeBorder(
border: BubbleBoxBorder(
color: Colors.blue,
width: 4,
///虚线边框,默认是实线边框
style: BubbleBoxBorderStyle.dashed,
),
///elliptical这个是椭圆角,角度比circular大,作者叫:enhanced radius
// radius: const BorderRadius.only(topRight: Radius.elliptical(30,15),bottomLeft: Radius.circular(40),),
// position: BubblePosition.center(0),
///边框外突出箭头的位置
// position: BubblePosition.start(40),
///边框外突出箭头的方向
direction: BubbleDirection.bottom,
///边框箭头尖头的角度,它同时会影响箭头下方三角的开口大小,值越大,尖头角度越大,下方三角开口越大,默认值是6
arrowAngle: 5,
///边框外突出箭头的钝角,值越大越圆滑
// arrowQuadraticBezierLength: 90,
),
///设置纯色或者渐变色背景
// backgroundColor: Colors.orange,
gradient: const LinearGradient(colors: [
Colors.red,
Colors.yellow,
Colors.blue,
]),
blendMode: BlendMode.difference,
child: const Text("Bubble Window"),
),
上面的示例代码演示了如何创建一个聊天窗口,我们在代码中添加了详细的注释,这样方便大家理解代码。我建议大家自己动手实现代码,至少修改一下代码中的属性值,这样可以真正体会到如何配置聊天窗口。
下面是聊天窗口的效果图,图中第一个聊天窗口就是示例代码运行生成的效果图,图中的其它聊天窗口,我们将在后面章回中介绍。
4. 内容总结
最后,我们对本章回的内容做一个全面的总结:
- bubble_box包提供了BubbleBox组件来实现聊天窗口功能;
- 聊天窗口通过BubbleBox组件的shape属性来实现,窗口中的内容通过该组件的child属性来实现;
- BubbleBox组件的shape属性是BubbleShapeBorder类型,通过修改该类的成员属性可以创建出不同形状和颜色的聊天窗口;
看官们,与"bubble_box包简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!