Flutter中嵌套Row内Expanded失效的原因是什么？

问题现象 #

单个Row组件内使用Expanded可以正常占据可用空间，但将Expanded放在嵌套的内层Row中时，Expanded无法实现预期的扩展效果。

核心原因 #

Expanded的作用是从父级Flex组件（Row、Column均为Flex的子类）中获取剩余可用空间，它必须直接作为Flex的子组件才能生效。

在嵌套Row的场景中：

• 内层Row作为顶层Row的子组件，默认情况下顶层Row会给它分配最小包裹尺寸（即刚好容纳内层Row内容的宽度），内层Row本身没有额外的可用空间。
• 此时内层Row里的Expanded没有可获取的剩余空间，自然无法实现扩展效果。

而单个Row的场景中，顶层Row直接占据父级容器（此处为屏幕）的可用宽度，Expanded作为它的直接子组件，能正常获取剩余空间并扩展。

代码对比验证 #

正常工作的单个Row代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: const MyWidget()));

class MyWidget extends StatelessWidget {
const MyWidget({super.key});

@override
Widget build(BuildContext context) {
return Row(
  children: [
    Expanded(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [Container(color: Colors.brown, child: Text("Hii"))],
        ),
       ),
     ],
   );
  }
}

这里Expanded直接作为顶层Row的子组件，顶层Row拥有屏幕的可用宽度，Expanded能顺利获取剩余空间。

失效的嵌套Row代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: const MyWidget()));

class MyWidget extends StatelessWidget {
const MyWidget({super.key});

@override
Widget build(BuildContext context) {
return Row(
  children: [
    Row(
      children: [
        Expanded(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                color: Colors.brown,
                child: Text("Hii"),
              ),
            ],
          ),
        ),
      ],
    ),
  ],
  );
 }
}

内层Row没有被Expanded包裹，它在顶层Row中仅占据内容最小宽度，内层的Expanded无空间可扩展。

修复思路 #

如果需要让内层Row里的Expanded生效，只需给内层Row也套上Expanded，让它从顶层Row获取可用空间：

return Row(
  children: [
    Expanded( // 给内层Row添加Expanded
      child: Row(
        children: [
          Expanded(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(color: Colors.brown, child: Text("Hii")),
              ],
            ),
          ),
        ],
      ),
    ),
  ],
);

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