Flutter中Row布局Text文本过长溢出如何解决

当前布局中Row组件内，承载群名称、最后一条消息的右侧Padding组件没有明确的横向宽度约束，内部Text组件无法感知可用的最大显示宽度，长文本会按原始长度直接渲染，最终超出容器边界触发布局溢出异常。

• 核心修复：使用Expanded组件包裹头像右侧的内容区域，让这块内容自动占用Row中扣除头像、固定间距后的所有剩余横向空间，给内部文本明确宽度边界
• 补充优化：给两个Text组件（群名、最后一条消息）配置maxLines和overflow属性，明确长文本的截断规则，从组件层面彻底避免溢出

// Row的children部分对应修改如下
children: [
  // 原有头像组件无需修改
  FutureBuilder<ImageProvider>(
    future: Buttons.getGroupchatImage(widget.groupchat.Id, context),
    builder: (BuildContext context, AsyncSnapshot<ImageProvider> snapshot) {
      return CircleAvatar(
        radius: 25,
        foregroundImage: snapshot.data,
        backgroundImage: Settings.DefaultGroupchatImage,
      );
    },
  ),
  // 用Expanded包裹右侧内容区，是解决溢出的关键
  Expanded(
    child: Padding(
      padding: const EdgeInsets.only(left: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.only(top: 2),
            child: Text(
              widget.groupchat.Name,
              maxLines: 1,
              overflow: TextOverflow.ellipsis, // 超出部分显示末尾省略号
              style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
            ),
          ),
          FutureBuilder<void>(
            future: Buttons.getNewGroupchatMessages(widget.groupchat.Id, context),
            builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
              return Text(
                Cache.getLastMessage(widget.groupchat.Id).Text,
                maxLines: 1, // 如需显示多行可调整该数值，比如设为2即最多展示2行
                overflow: TextOverflow.ellipsis,
                style: const TextStyle(fontSize: 15),
              );
            },
          ),
        ],
      ),
    ),
  ),
],

• overflow属性除了TextOverflow.ellipsis（末尾省略号）外，还可根据UI需求选择TextOverflow.fade（长文本尾部渐隐效果），不建议使用TextOverflow.visible
• 不要给右侧内容区写死固定宽度，这种方式无法适配不同尺寸的设备屏幕，小屏设备仍可能溢出、大屏设备会出现不必要的空白，使用Expanded/Flexible做自适应约束是Flutter响应式布局的标准实现方式

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