ListView内组件自动占满屏幕宽度，如何实现WhatsApp式聊天布局？

嘿，这个问题我做聊天APP的时候也碰到过！ListView默认会让子组件横向撑满宽度，确实会打乱我们想要的左右对齐布局，不过调整起来很简单，下面给你两种可行的方案：

方案一：用ListView实现（推荐，性能更优） #

核心思路是用Align组件打破ListView的横向填充约束，让每个消息气泡的宽度自适应内容，再根据消息归属设置对齐方向：

ListView.builder(
  reverse: true, // 可选，让最新消息显示在底部，符合聊天习惯
  itemCount: messages.length,
  itemBuilder: (context, index) {
    final message = messages[index];
    // 根据是否为己方消息设置对齐方式
    final alignment = message.isMine 
        ? Alignment.centerRight 
        : Alignment.centerLeft;
    // 自定义气泡圆角，贴近WhatsApp风格
    final borderRadius = message.isMine
        ? BorderRadius.only(
            topLeft: Radius.circular(18),
            topRight: Radius.circular(18),
            bottomLeft: Radius.circular(18),
          )
        : BorderRadius.only(
            topLeft: Radius.circular(18),
            topRight: Radius.circular(18),
            bottomRight: Radius.circular(18),
          );

    return Align(
      alignment: alignment,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        decoration: BoxDecoration(
          color: message.isMine ? Colors.blue[100] : Colors.grey[200],
          borderRadius: borderRadius,
        ),
        child: Text(
          message.content,
          style: TextStyle(fontSize: 16),
        ),
      ),
    );
  },
)

为什么这样有效？因为ListView的子项会收到“尽可能填充满宽度”的约束，而Align组件会忽略这个约束，让内部的Container仅根据文本内容自动调整宽度，再按照我们设置的alignment对齐到左侧或右侧。

方案二：用SingleChildScrollView + Column（适合消息量少的场景） #

如果你的聊天消息数量不多，不需要懒加载，也可以用SingleChildScrollView包裹Column，布局逻辑和上面一致：

SingleChildScrollView(
  reverse: true,
  child: Column(
    children: messages.map((message) {
      final alignment = message.isMine 
          ? Alignment.centerRight 
          : Alignment.centerLeft;
      final borderRadius = message.isMine
          ? BorderRadius.only(
              topLeft: Radius.circular(18),
              topRight: Radius.circular(18),
              bottomLeft: Radius.circular(18),
            )
          : BorderRadius.only(
              topLeft: Radius.circular(18),
              topRight: Radius.circular(18),
              bottomRight: Radius.circular(18),
            );

      return Align(
        alignment: alignment,
        child: Container(
          margin: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
          decoration: BoxDecoration(
            color: message.isMine ? Colors.blue[100] : Colors.grey[200],
            borderRadius: borderRadius,
          ),
          child: Text(
            message.content,
            style: TextStyle(fontSize: 16),
          ),
        ),
      );
    }).toList(),
  ),
)

不过要注意，这个方案会一次性渲染所有消息，当消息数量很多时，性能会比ListView差很多，所以更适合短对话场景。

额外优化小技巧 #

• 加上reverse: true可以让滚动容器默认滚动到底部，显示最新消息，符合用户聊天的使用习惯；
• 如果消息包含图片、语音等复杂内容，只需要把Text换成对应的组件即可，布局逻辑完全通用；
• 可以给气泡添加最大宽度限制，比如用ConstrainedBox包裹Container，设置maxWidth: MediaQuery.of(context).size.width * 0.75，避免超长消息撑满屏幕。

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