Flutter中Card内使用Flexible不显示 如何实现文本无固定宽度占满可用空间

问题原因 #

你遇到的Flexible使用后Card不显示的问题，核心原因是Flexible必须在有明确可分配空间的Flex（Row/Column）父容器下才能正常工作，你的代码中，放置两个带Flexible文本的左侧Column，是父级Row的直接子节点，你没有给这个Column做宽度限制，导致Column拿到的是无限宽度约束，内部的Flexible无法计算可用空间，最终布局溢出、组件不渲染。

修复方案 #

只需要给父级Row里的左侧Column外层套上Expanded，限制它最多占用Row除右侧任务计数列之外的所有可用空间即可，修改后的对应代码片段如下：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    // 新增Expanded包裹左侧文本列
    Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.baseline,
            textBaseline: TextBaseline.alphabetic,
            children: [
              Flexible(
                child: Text(
                  board.name,
                  style: theme.textTheme.headline2,
                  overflow: TextOverflow.ellipsis, // 建议新增，文本过长自动截断
                  maxLines: 1,
                )),
              if (board.bookmarked) Icon(Icons.star, color: colors.orange),
            ],
          ),
          Row(children:[
            Flexible(
              child: Text(
                board.role.toUpperCase(),
                style: theme.textTheme.headline4,
                overflow: TextOverflow.ellipsis,
              )),
          ]),
        ]),
    ),
    // 右侧计数列保持原有代码不变
    Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text(board.tasks.all.toString(), style: theme.textTheme.headline1),
            Icon(Icons.more_vert, color: colors.blue.shade800, size: 32),
          ]),
        Row(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text('TASK'.toUpperCase(), style: theme.textTheme.headline5),
          ])
      ]),
  ],
),

额外注意事项 #

• 如果你是将BoardWidget放在横向滚动容器（如横向ListView、PageView类的看板布局）中，保留外层的ConstrainedBox即可，它的宽度约束可以保证每个卡片的尺寸在合理范围
• 所有长文本建议都配置overflow和maxLines属性，避免文本溢出导致的布局异常
• Flexible/Expanded只能作为Flex组件（Row/Column/Flex）的直接子节点使用，且对应的Flex父容器必须有明确的宽高约束，不能是无限大的滚动约束

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