Flutter学习笔记 —— 聊天气泡布局实战

前言

最近在开发简易聊天室，刚好卡在怎么实现一个聊天气泡，于是经过反复测试，特地写下该文章，互相学习！

思考

直接上来贴代码文章也没有意义，不妨思考一下下图怎么实现

从上图可以得知，我们无从得知文字数量以及外层宽度，如何实现自适应且能根据外层的变化而变化呢？

技术实现

• ConstrainedBox(约束)
• Container
• Text

外层使用 约束控制 容器的宽度，而高度是不定长的，因此我们不设定指定宽度

代码示例

      Widget widget = Container(
            child: ConstrainedBox(
              //定义外层约束
              constraints: BoxConstraints(
                minHeight: 80.rpx,
                minWidth: 209.rpx
              ),
              child: Container(
                color: element.type == 0
                    ? Color.fromRGBO(177, 227, 245, 1)
                    : Colors.white,
                padding: EdgeInsets.only(top: 26.rpx,bottom: 26.rpx, left: 29.rpx,right: 29.rpx)
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                    maxWidth: 200,
                  ),
                    child: Container(
                        child: Text(
                            element.message!,style: TextStyle(fontSize: 30.rpx),
                          // strutStyle: StrutStyle(forceStrutHeight: true),
                        )
                    )
                ),
                margin: EdgeInsets.only(
                    bottom: 30.rpx, left: 48.rpx, right: 30.rpx),
                // height: 80.rpx,
              ),
            ),
      );

我们将外层的约束设定为 最小宽度& 最小高度 用来控制外层Container 宽高大小

而在Container内部，我们再次进行约束，此时的约束是用来控制内部文字的最大宽度，超出则自动换行！

结束语

关于 Flutter学习笔记 —— 聊天气泡布局实战 就讲到这里，对你有帮助的话！

• 点赞
• 收藏

谢谢你的观看！