第四百二十五回 bubble_box包简介

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