You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter聊天气泡开发:如何避免Column内Expanded撑大父容器宽度

解决方案

给Column外层包裹IntrinsicWidth组件即可实现需求:
IntrinsicWidth会将其子组件的宽度限制为子组件的最大固有宽度,整体聊天气泡宽度最终由消息文本的实际宽度决定,不会被头部的Expanded装饰线撑到最大宽度上限,同时装饰线可以正常填充满姓名右侧的头部剩余空间。

修改后的代码如下:

return Container(
    color: Colors.grey.shade200,
    constraints:
        BoxConstraints(maxWidth: (MediaQuery.of(context).size.width * 0.7)),
    child: IntrinsicWidth(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("Juan"),
              Expanded(
                child: Container(
                  color: Colors.red,
                  height: 3,
                ),
              )
            ],
          ),
          Text("Text of the message"),
        ],
      ),
    ));

内容的提问来源于stack exchange,提问作者JMGpp

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 14:09:01