Flutter聊天消息组件设置max-width为屏幕50%的实现问题

要限制聊天消息组件的最大宽度为屏幕的50%，你可以通过ConstrainedBox（或Container）结合MediaQuery获取屏幕宽度来实现，以下是修改后的完整代码：

return Padding(
  padding: const EdgeInsets.all(9.0),
  child: ConstrainedBox(
    // 设置最大宽度为屏幕宽度的50%
    constraints: BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width * 0.5,
    ),
    child: Material(
      elevation: 5.0,
      borderRadius: chatBorder,
      color: chatColor,
      child: Padding(
        padding: const EdgeInsets.all(13.0),
        child: Column(
          // 确保所有内容左对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  messageSender,
                  style: const TextStyle(
                    color: Colors.white70,
                    fontSize: 10.0,
                    fontWeight: FontWeight.w200,
                  ),
                ),
                Text(
                  timeNow,
                  style: const TextStyle(
                    color: Colors.white70,
                    fontSize: 10.0,
                    fontWeight: FontWeight.w200,
                  ),
                ),
              ],
            ),
            // 添加间距优化视觉层次
            const SizedBox(height: 8.0),
            Text(
              messageText,
              style: const TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    ),
  ),
);

关键修改说明 #

• 宽度限制：通过ConstrainedBox的maxWidth属性，结合MediaQuery.of(context).size.width获取屏幕宽度，设置为屏幕的50%，确保消息气泡不会过宽
• 对齐优化：给Column添加crossAxisAlignment: CrossAxisAlignment.start，避免内容默认居中的问题，保持聊天消息的左对齐样式
• 视觉优化：增加SizedBox分隔发送者信息与消息内容，移除了不必要的Align组件，简化布局结构

你也可以用Container替代ConstrainedBox，效果完全一致：

child: Container(
  constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.5),
  child: Material(...),
)

内容的提问来源于stack exchange，提问作者Yolo-cell-hash