flutter - 为什么 Flutter 中的 ListView 不应用高度？

Question

我有一个简单的代码:

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Container(
        padding: EdgeInsets.symmetric(vertical: 60.0,),
        color: Color(0xFF24323F),
        child: Container(
          color: Colors.green,
          margin: EdgeInsets.symmetric(vertical: 10.0),
          height: 200.0,
        ),
      ),
    );
  }
}

我尝试更改 Container 的高度，但它不起作用。为什么？

渲染结果:

Answer 1

基于 @rémi-rousselet答案(你真的应该相信答案):

You need to tell flutter how to align items if they are smaller then their parent. Or else Flutter will usually force them to fill the space

因为您没有指定任何内容，所以第一个容器展开全屏，并且绿色也展开以填充所有可用空间(全屏减去填充)。

return Align(alignment: Alignment.topCenter,
  child: Directionality(
    textDirection: TextDirection.ltr,
    child: Container(
      padding: EdgeInsets.symmetric(
        vertical: 60.0,
      ),
      color: Colors.blue,
      child: Container(
        color: Colors.green,
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: 200.0,
      ),
    ),
  ),
);

这将使您的所有小部件收缩以适应您定义的大小 200.0 + 60.0(填充)+ 60.0(填充)。

但是，如果您只希望内部(绿色)容器的高度为 200 而蓝色的容器为全屏，您可以将答案调整为类似这样的内容(请随意更改 Alignemt 指令以满足您的需要) :

return Directionality(
  textDirection: TextDirection.ltr,
  child: Container(
    padding: EdgeInsets.symmetric(
      vertical: 60.0,
    ),
    color: Colors.blue,
    child: Align(alignment: Alignment.topCenter,
      child: Container(
        color: Colors.green,
        margin: EdgeInsets.symmetric(vertical: 10.0),
        height: 200.0,
      ),
    ),
  ),
);