Flutter聊天气泡宽度限制与文本换行问题咨询

安全阿岳

2026-7-22

问题描述

需要实现：

聊天气泡最大宽度限制在屏幕中部位置（比如占屏幕宽度的60%）
长消息自动向下换行，避免溢出

当前布局存在长文本溢出问题，以下是相关信息：

测试用长文本：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vel est quis dolor dignissim imperdiet at eget dui. Sed tincidunt hendrerit condimentum. Morbi et porttitor nisi. Vestibulum consectetur justo sem, quis rhoncus urna cursus sed. Etiam molestie tellus in tincidunt aliquam. Aliquam mattis scelerisque sapien, nec lobortis ante vehicula placerat. Aliquam in elit pulvinar, pulvinar elit non, interdum enim. Vivamus eu placerat nisl. In vitae nunc vel mi vehicula dictum et vel erat. Nunc pharetra tincidunt felis eu egestas. Sed tincidunt, ligula ut sodales auctor, libero arcu gravida eros, id semper est sem sit amet lorem. Pellentesque eleifend sit amet ligula non tempor. Integer a elit nec dolor ultrices dapibus vitae eget metus. Sed nec ornare leo, sed efficitur sapien. Mauris eros neque, suscipit a mattis vitae, porttitor eget lacus.

当前代码：

return Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Expanded(flex: 10,
            child: Column(
              children: [
                Row(
                  children: [
                    Text(timestamp),
                  ],
                ),
                Container(
                  constraints: BoxConstraints(minWidth: 10, maxWidth: 200, minHeight: 15, maxHeight: 200),
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(66, 135, 245, 100.0),
                    borderRadius: BorderRadius.circular(30)
                  ),
                  child: Row(
                    children: [
                      Text(text),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      );

问题现象：
长文本会超出聊天气泡容器，无法自动换行，导致内容溢出屏幕。

解决方案

问题根源在于：

Text外层嵌套了Row，Row会强制子组件无限水平延伸，阻止Text自动换行
Container的maxWidth是固定值200，无法适配不同屏幕尺寸，也达不到"屏幕中部"的需求

修改后的代码：

return Align(
  alignment: Alignment.centerLeft,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(timestamp),
      Container(
        constraints: BoxConstraints(
          minWidth: 10,
          // 限制最大宽度为屏幕的60%，即中部位置
          maxWidth: MediaQuery.of(context).size.width * 0.6,
          minHeight: 15,
        ),
        padding: EdgeInsets.all(5),
        decoration: BoxDecoration(
          color: Color.fromRGBO(66, 135, 245, 1.0),
          borderRadius: BorderRadius.circular(30)
        ),
        // 移除外层Row，直接用Text
        child: Text(
          text,
          softWrap: true,
          overflow: TextOverflow.wrap,
        ),
      ),
    ],
  ),
);

关键改动说明：

移除了不必要的Row嵌套：原布局中最外层的Row+Expanded可以用Align替代，更简洁地实现左对齐
去掉Text外层的Row：让Text能够在容器宽度限制内自动换行
动态设置maxWidth：用MediaQuery.of(context).size.width * 0.6将最大宽度设为屏幕的60%，适配不同屏幕且符合"中部位置"的需求
明确设置Text的换行属性：softWrap: true和overflow: TextOverflow.wrap确保长文本正确换行

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