Flutter消息框UI格式化问题：容器未随内容自适应调整

云原生阿岚

2026-6-13

Flutter消息框宽度自适应及最小宽度设置解决方案

问题根源

你的代码仅给消息框设置了最大宽度（屏幕的70%），缺少最小宽度限制，同时当前结构下容器未正确跟随文本换行后的宽度自适应调整。

解决方案

给ConstrainedBox的BoxConstraints同时添加最小宽度和最大宽度限制，让容器在文本较少时保持设定的最小宽度，文本较长换行时自动扩展至最大宽度，同时确保容器宽度跟随文本内容自适应。

修改后的完整代码：

return Padding(
  padding: EdgeInsets.only(
    top: sameUserAsNext ? 4.0 : 10.0,
    bottom: 4.0,
    left: 10.0,
    right: 10.0,
  ),
  child: Align(
    alignment: isCurrentUser ? Alignment.centerRight : Alignment.centerLeft,
    child: Container(
      padding: EdgeInsets.symmetric(vertical: 10, horizontal: 15),
      decoration: BoxDecoration(
        color: isCurrentUser
            ? const Color.fromARGB(255, 68, 129, 235)
            : Colors.grey[800],
        borderRadius: BorderRadius.circular(25),
      ),
      child: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: MediaQuery.of(context).size.width * 0.5, // 添加最小宽度限制
          maxWidth: MediaQuery.of(context).size.width * 0.7, // 保留原最大宽度
        ),
        child: Text(
          message.text,
          style: TextStyle(
            color: Colors.white,
            fontSize: messageFontSize,
            height: 1.4,
          ),
          softWrap: true,
          maxLines: null,
          textAlign: TextAlign.left,
        ),
      ),
    ),
  ),
);