Flutter聊天应用多行消息容器存在多余空白问题求助

开发聊天应用时，单行消息显示正常，但多行消息对应的Container会出现多余空白。

相关代码 #

Column(
  crossAxisAlignment: crossAxisAlignment,
  children: [
    Container(
        margin: EdgeInsets.only(right:39),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
        decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(19)),
            ),
        child: Wrap(
          alignment: WrapAlignment.end,
          crossAxisAlignment: WrapCrossAlignment.end,
          children: [
            Text(
              widget.msg['content'].trim(),
              maxLines: 39,
              style: TextStyle(color: Colors.white.withOpacity(0.79), fontSize: 17),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 7),
              child: Text(
                DateFormat('HH:mm').format(widget.sendTime),
                style: TextStyle(color: Colors.white.withOpacity(0.4), fontSize: 12),
              ),
            ),
           
          ],
        )),
  ],
)

效果说明 #

• 预期效果：多行消息的Container高度完全贴合内容，时间文本对齐在消息内容的右下角，无多余空白。
• 实际效果：多行消息的Container底部出现多余空白，整体高度超出内容所需的实际高度。

解决方案 #

问题源于Wrap组件的布局特性导致冗余空间，将Wrap替换为Row，并用Expanded包裹消息文本组件，即可让时间文本自动对齐到消息右下角，同时Container会贴合内容高度：

Column(
  crossAxisAlignment: crossAxisAlignment,
  children: [
    Container(
        margin: EdgeInsets.only(right:39),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
        decoration: BoxDecoration(
            borderRadius: const BorderRadius.all(Radius.circular(19)),
            ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            Expanded(
              child: Text(
                widget.msg['content'].trim(),
                maxLines: 39,
                style: TextStyle(color: Colors.white.withOpacity(0.79), fontSize: 17),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 7),
              child: Text(
                DateFormat('HH:mm').format(widget.sendTime),
                style: TextStyle(color: Colors.white.withOpacity(0.4), fontSize: 12),
              ),
            ),
          ],
        )),
  ],
)

补充说明 #

Expanded包裹的Text会自动处理换行需求，Row的crossAxisAlignment: CrossAxisAlignment.end会确保时间文本始终对齐在消息内容的底部右侧，完全匹配聊天消息的预期布局，且不会产生多余空白。

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