Flutter中如何让消息Container仅占用所需空间？

我来帮你搞定这个聊天消息宽度的问题！你遇到的核心问题是Column默认会强制子组件占满可用宽度，所以不管消息长短，容器都会被拉满。用Flexible没用是因为它是用来分配剩余空间的，而不是让组件收缩到内容宽度。

解决方案：用Align包裹消息容器 #

我们需要让每个消息组件根据自身内容宽度显示，同时对齐到左侧（对方消息）或右侧（自己的消息）。具体修改如下：

修改buildMessageWidget函数

Widget buildMessageWidget(
  BuildContext context, Message message, String currentUserId) {
  final bool isFromCurrentUser = message.senderId == currentUserId;
  // 用Align包裹，让消息容器根据内容宽度显示，并对齐到对应方向
  return Align(
    alignment: isFromCurrentUser ? Alignment.centerRight : Alignment.centerLeft,
    child: LimitedBox(
      maxWidth: MediaQuery.of(context).size.width * .75,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 2),
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(
              isFromCurrentUser ? 0 : messageBorderRadius,
            ),
            topLeft: Radius.circular(
              isFromCurrentUser ? messageBorderRadius : 0,
            ),
            bottomLeft: Radius.circular(messageBorderRadius),
            bottomRight: Radius.circular(messageBorderRadius),
          ),
          color: isFromCurrentUser ? themeAccentColor[500] : Colors.cyan,
        ),
        // 移除内部的Align，因为外层Align已经处理了对齐
        child: Text(
          message.text,
          style: TextStyle(
            color: isFromCurrentUser ? Colors.white : Colors.black,
          ),
        ),
      ),
    ),
  );
}

为什么这样改？

1. Align组件：它会让子组件保持自身的实际宽度，然后根据alignment属性将其定位在父容器（这里是Column的宽度范围内）的左侧或右侧。
2. LimitedBox：继续保留它来限制消息的最大宽度（比如屏幕的75%），避免长消息撑满整个屏幕影响阅读。
3. 移除内部Align：原来Container里的Align是多余的，现在外层的Align已经完成了对齐工作，直接放Text即可。

额外小建议 #

你的输入框提示文字写的是Enter your email，应该改成Enter your message更贴合聊天场景：

decoration: const InputDecoration(
  hintText: 'Enter your message', // 这里修改
),

这样修改后，短消息会自动收缩到内容宽度，长消息会被限制在最大宽度内，同时自己的消息靠右，对方的消息靠左，完全符合你想要的效果！

内容的提问来源于stack exchange，提问作者Hunny