今天碰到一个很奇怪的问题，简单的设置 Container 的高度，结果死活不生效，没起作用。

@override
Widget build(BuildContext context) {
  return Container(
      height: 48, // 设置高度
      color: Colors.deepOrange,
      // 其他内容
    );
}

明明设置了高度，结果运行后还是占满整个屏幕，我就纳闷，最后甚至重启整个项目，结果还是如此。

最后发现竟然是 TabView 的影响，我上面代码布局在 TabView 中，是 TabBarView 的子页面。这就导致我的布局受到 TabBarView 的约束。TabBarView 会尝试占用所有可用的空间，即便设置了高度，结果在上下文中也被忽略了。

要在 TabView 中固定高度，您可以使用 Align 或 Column 加上 MainAxisSize.min 来控制高度。这样可以让 Container 保持设定的高度，而不是填充整个屏幕。

@override
Widget build(BuildContext context) {
  return Align(
    alignment: Alignment.topCenter,
    child: Container(
      height: 48, // 设置高度
      color: Colors.deepOrange,
      // 其他内容
    ),
  );
}

alignment: Alignment.topCenter 的作用是将 Container 的内容在它父组件的顶部水平居中显示。

也可以这样

@override
Widget build(BuildContext context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: <>[
      Container(
        height: 48, // 设置高度
        color: Colors.deepOrange,
        // 其他内容
      ),
      // 其他Widgets
    ],
  );
}

本文由老郭种树原创，转载请注明：https://guozh.net/flutter-container-height-setting-not-working/