Flutter中如何让Row的Flexible元素灵活自适应调整大小？

问题原因 #

你的代码中两个Flexible默认flex值都是1，Row会按1:1的比例分配可用空间，导致长文本无法占据更多剩余空间；移除第二个Flexible后，第二个文本会按自身宽度展示，过长时会溢出Row。

解决方案 #

核心思路是让需要优先占据空间的元素使用Expanded（等价于Flexible(fit: FlexFit.tight)），剩余元素保留Flexible。这样：

• 优先元素会抢占Row的剩余空间，尽可能展示更多内容
• 剩余元素仅占用自身所需宽度，空间不足时自动压缩并显示省略号

双元素场景代码示例 #

Widget build(BuildContext context) {
  return Row(
    children: [
      Expanded(
        child: Text(
          'looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(color: Colors.yellowAccent),
        ),
      ),
      Flexible(
        child: Text(
          'looooooong',
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
          style: const TextStyle(color: Colors.blue),
        ),
      ),
    ],
  );
}

多动态元素通用方案 #

如果Row内的元素来自服务端且数量不固定，只需让第一个元素用Expanded，后续所有元素用Flexible包裹即可：

Widget build(BuildContext context) {
  // 模拟服务端返回的动态子元素
  final dynamicChildren = [
    Text(
      'loooooooooooooooooooooooooooooooooong',
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      style: const TextStyle(color: Colors.yellowAccent),
    ),
    Text(
      'medium-length text',
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      style: const TextStyle(color: Colors.blue),
    ),
    Text(
      'loooooooong content here',
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      style: const TextStyle(color: Colors.green),
    ),
  ];

  return Row(
    children: [
      Expanded(child: dynamicChildren[0]),
      ...dynamicChildren.sublist(1).map((child) => Flexible(child: child)),
    ],
  );
}

原理说明 #

• Expanded：强制占据Row的剩余可用空间，当空间不足时会按flex比例压缩（默认flex=1），配合文本的溢出配置可自动截断。
• Flexible（默认fit: FlexFit.loose）：子元素优先使用自身所需宽度，仅当Row空间不足时才会被压缩，确保不会溢出布局。

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