Flutter 自适应大小聊天气泡 自动大小 动态计算高度

Smart Bubble Widget

一个可自适应大小的聊天气泡Flutter组件

引用方式

dependencies:
smart_bubble: ^1.0.1

https://pub.dev/packages/smart_bubble/admin
https://github.com/50Death/Smart-Bubble-Widget

实现原理

气泡由背景(气泡本身)和内容(child)组成，当一起渲染时，无法得知内容所占大小，所以没法在第一次渲染时让气泡和内容正好合适。
这里使用完成状态监听，配合GlobalKey获取child组件渲染后的大小，从而再次调整气泡大小，从而使得气泡可以跟随内部元素进行自适应。

当组件initState时，对完成状态添加监听器：

  @override
  void initState() {
    super.initState();
    _widgetsBinding = WidgetsBinding.instance;
    _widgetsBinding.addPostFrameCallback((callback) {
      RenderObject object = _key.currentContext.findRenderObject();
      Size mSize = object.semanticBounds.size;
      _superSetState(() {
        height = mSize.height + padding.vertical;
        width = mSize.width + padding.horizontal;
      });
    });
  }

当组件第一次build结束后，内部元素child已有确定的大小，内部对child使用了OverflowBox进行包裹，使内部元素可以超出外部组件，从而使比如Text()组件能够正常伸展，无法伸展了再回行。

child: OverflowBox(
                      maxWidth: MediaQuery.of(context).size.width - 70,
                      child: Container(
                        child: this.child,
                        key: _key,
                      ),
                    )

简言之，就是对build进行监听，build完成后获取内部组件大小，然后setState()更改外部气泡大小以适应。

参数

maxWidth → double
最大宽度，第一次渲染时气泡的宽度，内部OverFlowBox限制了child最大不能超过屏幕宽度-70，设置过小会导致内部元素超出宽度，导致部分不可见。可设的非常大不会布局溢出。用户无法看到第一次渲染时非常大的气泡。
默认值： 200.0

maxHeight → double
最大高度，第一次渲染时气泡的高度，设置过小会导致下方超出布局的内容不可见，可设置非常大不会布局溢出。用户无法看到第一次渲染时非常大的气泡。
默认值：2048.0

color → Color
气泡颜色
默认值：蓝色Colors.blue

borderColor → Color
边框颜色
可缺省

arrowDirection → ArrowDirection
气泡箭头方向
可选值：左(ArrowDirection.left)，右(ArrowDirection.right)
默认值ArrowDirection.right

child → Widget
子元素，已测试过图片和文字

title → Text
气泡标题，气泡上方的文字
可缺省

padding → EdgeInsets
气泡到内部组件的距离
默认值EdgeInsets.symmetric(horizontal: 20, vertical: 15)

其他参数请参考内部气泡原作者

使用样例

SmartBubble(
    title: Text("192.168.31.1"),
    arrowDirection: ArrowDirection.left,
    child: Text("Hello",style: TextStyle(color: Colors.white, fontSize: 30)),
),
SmartBubble(
    title: Text("192.168.31.1"),
    child: Image.asset("assets/3.png")
),

截图

引用

使用了StevenHu_Sir的不能自适应大小的气泡
点此跳转，并在此基础上新增了自适应大小和左上方箭头

待更

气泡里的文字的选择，复制等

感谢

喜欢或者有用，觉得好的老板们请点星，点赞，FORK三连啊！