为什么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,
        ),
      ),
    );
  }
}

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

render的结果：

Answer 1

基于@rémi-rousselet的答案（您应该将答案归功于此）：

  

如果项比父项小，则需要告诉flutter如何对齐项。否则Flutter通常会迫使他们填充空间

由于您没有指定任何内容，因此第一个容器将展开为全屏显示，绿色也将展开以填充所有可用空间（其中为全屏显示，减去填充）。

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,
      ),
    ),
  ),
);

Answer 2

如果项比父项小，则需要告诉flutter如何对齐项。否则Flutter通常会迫使他们填充空间

在这种情况下，将Directionality包裹到Align中应该可以解决问题