Flutter：如何修复文本组件列表中的RenderFlex溢出问题？

我有一个简单的菜单项列表，对其中的文本内容控制有限。组件结构如下：

• FutureBuilder
• List Item
  • Row
    • 图标（当前用Icon组件实现）
    • Column
      • 标题文本
      • 描述文本

预期效果如下：

当前列表由FutureBuilder生成，MenuCard组件代码如下：

class MenuCard extends StatelessWidget {
  const MenuCard({
    Key? key,
    required this.parentLabel,
    required this.menuRow,
  }) : super(key: key);

  final String parentLabel;
  final MenuRow menuRow;

  final int _associationId = 22;

  void getPage(BuildContext context) {
    Widget nextPage;

    nextPage = MenuListScreen(
      menu: 'mobilehome',
      label: menuRow.label,
      associationId: _associationId,
    );

    Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => nextPage,
        ));
  }

  @override
  Widget build(BuildContext context) {
    Color textColor = Theme.of(context).colorScheme.primary;
    Color splashColor = Theme.of(context).colorScheme.primary.withOpacity(0.40);

    if (menuRow.colour == 'green') {
      textColor = Theme.of(context).colorScheme.secondary;
      splashColor = Theme.of(context).colorScheme.secondary;
    }

    return InkWell(
      splashColor: splashColor,
      onTap: () => getPage(context),
      child: Container(
        width: double.infinity,
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(color: textColor),
          ),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(
              Icons.beach_access,
              color: Colors.blue,
              size: 36.0,
            ),
            const SizedBox(
              width: 10,
            ),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MenuItemLabel(menuRow: menuRow, textColor: textColor),
                MenuItemDescription(menuRow: menuRow, textColor: textColor),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

描述文本组件代码如下：

class MenuItemDescription extends StatelessWidget {
  const MenuItemDescription({
    Key? key,
    required this.menuRow,
    required this.textColor,
  }) : super(key: key);

  final MenuRow menuRow;
  final Color textColor;

  @override
  Widget build(BuildContext context) {
    if (menuRow.description.isNotEmpty) {
      return Text(
        menuRow.description,
        maxLines: 2,
        softWrap: true,
        overflow: TextOverflow.clip,
        style: TextStyle(
          color: textColor,
          fontSize: 14,
        ),
      );
    }
    return const SizedBox(width: 1);
  }
}

解决方案 #

要解决RenderFlex溢出并实现符合预期的文本裁剪，只需做两处关键修改：

1. 给Column添加空间约束
   在Row中的Column外层包裹Expanded组件，让Column能够占用Row中除图标和间距外的剩余可用宽度，避免文本无限制延伸导致溢出：

// 修改MenuCard中Row的子组件部分
Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(
      Icons.beach_access,
      color: Colors.blue,
      size: 36.0,
    ),
    const SizedBox(width: 10),
    // 新增Expanded包裹Column
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MenuItemLabel(menuRow: menuRow, textColor: textColor),
          MenuItemDescription(menuRow: menuRow, textColor: textColor),
        ],
      ),
    ),
  ],
),

2. 修改文本溢出行为
   将MenuItemDescription中的TextOverflow.clip改为TextOverflow.ellipsis，让超出指定行数的文本显示省略号，符合预期的裁剪效果：

// 修改MenuItemDescription中的Text组件
return Text(
  menuRow.description,
  maxLines: 2,
  softWrap: true,
  overflow: TextOverflow.ellipsis, // 替换原有的clip
  style: TextStyle(
    color: textColor,
    fontSize: 14,
  ),
);

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