BoxConstraints强制无限高

Question

child:Column(
children: <Widget>[
  Container(
    height: double.infinity,
    width: 100.0,
    color: Colors.red,
    child: Text('hello'),
  ),)

在这种情况下，当我使height：double.infinity时，运行时会出错，提示** BoxConstraints会强制无限高。**但是当我手动给定高度时，它会很好地工作。 谁能解释我为什么会这样。

Answer 1

这个怎么样？

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
//                height: double.infinity,
                width: 100.0,
                color: Colors.red,
                child: Text('hello'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

这意味着您不能为容器提供无限的高度。如果不提供高度限制，这就是明显的行为。

您必须为容器指定有限的高度，以便颤动可以渲染它，如果您提供了无限的容器，则如何颤动渲染它以及达到哪个限制！

相反，您可以将 double.infinity 设置为width，而flutter将成功呈现该效果，因为默认情况下flutter的宽度受到限制，它将把width设置为屏幕的宽度。

考虑到您必须提供屏幕高度，您可以使用MediaQuery

Widget yourMethod(or build)(BuildContext context){
    final screenHeight = MediaQuery.of(context).size.height;
    return Column(
        children:<Widget>[
            Container(
                height:screenHeight,//but this will be height of whole screen. You need to substract screen default paddings and height of appbar if you have one
                width:100.0,
                ....
            )
        ]);

    }

希望这会有所帮助！ 编码愉快。.

Answer 3

BoxConstraints forces an infinite height

为什么会这样

您要求在没有高度约束的情况下渲染无限高的对象……Flutter 无法做到这一点。

---

Column 分两个阶段布置孩子：

• 阶段 1：non-Flex 项（任何非 Expanded、Flexible 或 Spacer）
  • 在无限制空间
• 阶段 2：Flex 项（仅限 Expanded、Flexible、Spacer）
  • 用完剩余空间

第一阶段

• Column's 第一阶段垂直布局在无界空间中完成。这意味着：
  • 无垂直约束→无高度限制
  • 任何具有无限高度的小部件都会抛出上述错误
  • 您无法在无限高度约束下渲染无限高度对象......这是永远持续的

第二阶段

• 在第 1 阶段小部件占用它们本质上需要的空间后，第 2 阶段 Flex 项共享剩余/剩余空间
  • 剩余空间是根据传入约束减去阶段 1 小部件尺寸计算得出的
  • double.infinity 高度将扩大以用完剩余空间

无限高也行

以下是在 Container 内的 Column 上使用无限高度的示例，这很好：

class ColumnInfiniteChildPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Flexible(
              child: Container(
                height: double.infinity, // ← perfectly fine
                  child: Text('Column > Container > Text')),
            ),
            Text('Column > Text')
          ],
        ),
      ),
    );
  }
}

去掉 Flexible 就会抛出错误。