Flutter中如何让SizedBox内的Container匹配父组件尺寸？

问题原因 #

在Row布局中直接给子组件设置width: double.infinity会引发布局冲突：Row的主轴为水平方向，它期望子组件宽度是有限值，但double.infinity要求无限宽度，这种矛盾会导致整个Row无法正常渲染，最终所有视图消失。

解决方案 #

使用Expanded组件包裹黑色Container，它会自动占据Row中剩余的可用空间，既实现了匹配父组件（Row剩余空间）的效果，又不会引发布局冲突。

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: Scaffold(
          body: Align(
        alignment: Alignment.topCenter,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(
              height: 200,
            ),
            Container(
              width: 250,
              color: Colors.blue,
              child: Row(
                children: [
                  const Text('456789', style: TextStyle(color: Colors.white, fontSize: 15)),
                  // 用Expanded替代原SizedBox，让黑色Container占据Row剩余空间
                  Expanded(
                    child: Container(
                      height: 10,
                      color: Colors.black,
                      // child: const Text('hello',style: TextStyle(color: Colors.white, fontSize: 10)),
                    ),
                  )
                ],
              ),
            )
          ],
        ),
      )),
    );
  }
}

补充说明 #

• 如果需要给黑色Container设置最小/最大宽度，可以结合ConstrainedBox和Expanded一起使用，示例：

  Expanded(
    child: ConstrainedBox(
      constraints: const BoxConstraints(minWidth: 50),
      child: Container(
        height: 10,
        color: Colors.black,
      ),
    ),
  )
  

• 不要在Row/Column的直接子组件中使用double.infinity作为主轴方向的尺寸，这类场景优先用Expanded或Flexible来分配空间。

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