Flutter布局问题：BoxConstraints致文本框换行后与文本错位

你的问题根源在于：外层Column在Row中会默认占用尽可能多的水平空间，而Container的maxWidth约束会让它在空间充足时直接拉满最大宽度，哪怕文本内容很短，从而出现右侧空白。

可以通过以下两步修复：

1. 用Flexible包裹外层Column，限制它只占用Row中的必要空间，避免被强制拉伸。
2. 在Container内部的Column外层添加IntrinsicWidth，让Container的宽度自适应文本实际宽度，同时保留maxWidth的上限限制（文本过长时自动换行并限制宽度）。

修改后的完整代码：

Align(
  alignment: Alignment.topLeft,
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Padding(
        padding: EdgeInsets.fromLTRB(0, 8, 8, 0),
        child: CircleAvatar(
          radius: 20,
          backgroundImage: NetworkImage(
            'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
          ),
        ),
      ),
      // 新增Flexible包裹外层Column
      Flexible(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              constraints: BoxConstraints(
                maxWidth: MediaQuery.of(context).size.width * 0.7,
              ),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(12),
              ),
              // 新增IntrinsicWidth让Container宽度自适应文本
              child: IntrinsicWidth(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: const EdgeInsets.fromLTRB(10, 10, 15, 5),
                      child: Text(
                        messages[i].name,
                        style: const TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.blue,
                        ),
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(16, 0, 16, 16),
                      child: Text(
                        messages[i].message,
                        softWrap: true, // Allow text to wrap
                      ),
                    ),
                  ],
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(7),
              child: Text(
                '${messages[i].timestamp.hour < 10 ? '0${messages[i].timestamp.hour}' : messages[i].timestamp.hour}:${messages[i].timestamp.minute < 10 ? '0${messages[i].timestamp.minute}' : messages[i].timestamp.minute}',
                style: const TextStyle(
                  color: Colors.grey,
                  fontSize: 12,
                ),
              ),
            )
          ],
        ),
      ),
    ],
  ),
)

这样修改后：

• 短文本时，Container宽度会刚好包裹文本内容，消除多余空白
• 长文本时，会自动换行并限制在设置的maxWidth范围内，保持布局美观

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