Flutter聊天页面消息间距优化：如何简化不同类型消息的间距代码？

核心思路 #

把重复的消息样式、间距判断逻辑封装成独立组件，同时用统一的样式类管理所有聊天相关的视觉参数，彻底消除代码冗余，提升可维护性。

第一步：规整ChatMessage模型 #

用枚举统一管理消息类型，避免硬编码字符串：

enum MessageType { sent, received }

class ChatMessage {
  final String content;
  final MessageType type;
  final DateTime timestamp;

  ChatMessage({
    required this.content,
    required this.type,
    required this.timestamp,
  });
}

第二步：统一管理聊天样式参数 #

把所有间距、颜色、圆角等样式抽离到单独类中，后续调整样式只需要修改这里：

class ChatStyles {
  // 消息外部间距（区分收发）
  static const EdgeInsets sentMsgMargin = EdgeInsets.only(left: 40, top: 8, right: 16, bottom: 8);
  static const EdgeInsets receivedMsgMargin = EdgeInsets.only(left: 16, top: 8, right: 40, bottom: 8);
  
  // 消息容器内边距
  static const EdgeInsets msgContentPadding = EdgeInsets.symmetric(horizontal: 16, vertical: 12);
  
  // 消息背景色（匹配Apple风格）
  static const Color sentBg = Color(0xFF007AFF);
  static const Color receivedBg = Color(0xFFE5E5EA);
  
  // 文字样式
  static const TextStyle msgTextStyle = TextStyle(fontSize: 16, color: Colors.black);
  static const TextStyle timeTextStyle = TextStyle(fontSize: 12, color: Colors.grey);
}

第三步：封装独立的ChatMessageItem组件 #

把单个消息的渲染、样式判断逻辑全部集中到这个组件里：

class ChatMessageItem extends StatelessWidget {
  final ChatMessage message;

  const ChatMessageItem({super.key, required this.message});

  @override
  Widget build(BuildContext context) {
    final isSent = message.type == MessageType.sent;
    return Padding(
      padding: isSent ? ChatStyles.sentMsgMargin : ChatStyles.receivedMsgMargin,
      child: Align(
        alignment: isSent ? Alignment.centerRight : Alignment.centerLeft,
        child: Container(
          padding: ChatStyles.msgContentPadding,
          decoration: BoxDecoration(
            color: isSent ? ChatStyles.sentBg : ChatStyles.receivedBg,
            borderRadius: _getBubbleBorder(isSent),
          ),
          child: Column(
            crossAxisAlignment: isSent ? CrossAxisAlignment.end : CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text(message.content, style: ChatStyles.msgTextStyle),
              const SizedBox(height: 4),
              Text(
                DateFormat('HH:mm').format(message.timestamp),
                style: ChatStyles.timeTextStyle,
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 实现Apple风格的气泡圆角
  BorderRadius _getBubbleBorder(bool isSent) {
    return isSent
        ? const BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
            bottomLeft: Radius.circular(16),
            bottomRight: Radius.circular(4),
          )
        : const BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
            bottomLeft: Radius.circular(4),
            bottomRight: Radius.circular(16),
          );
  }
}

第四步：简化消息列表代码 #

现在列表Builder彻底摆脱冗余逻辑，只负责渲染组件：

ListView.builder(
  itemCount: messages.length,
  padding: const EdgeInsets.symmetric(vertical: 8),
  itemBuilder: (context, index) {
    return ChatMessageItem(message: messages[index]);
  },
)

效果对比 #

Apple参考风格

优化后实现效果

优化优势 #

1. 消除冗余：所有重复的条件判断、样式代码只写一次，新增消息类型（如系统通知）只需扩展组件逻辑
2. 易维护：样式参数集中管理，调整间距、颜色不用修改列表核心代码
3. 高扩展性：后续添加图片、语音、已读状态等功能，直接在ChatMessageItem中扩展即可
4. 可读性强：列表代码简洁清晰，新人接手能快速理解逻辑

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