在颤动中计算 100% 高度答案

【问题标题】：Calculating 100% height in flutter在颤动中计算 100% 高度
【发布时间】：2020-11-29 12:08:37
【问题描述】：

我发现了一些关于在颤振中计算高度的主题，但没有一个回答我的问题。我正在尝试计算100% of device height。我想，我必须从MediaQuery.of().size.height 中减去两件事。首先是AppBar 高度，所以我通过创建变量appBar 并获取属性preferredSize.height 来计算它。其次是appBar 上方的栏（包含电池状态、通知等内容）。

这是最简单的例子：

@override
Widget build(BuildContext context) {
var appBar = AppBar(
  title: Text(widget.title),
);

return Scaffold(
  appBar: appBar,
  body: Center(
    child: Builder(
      builder: (ctx) => Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(ctx).size.height -
                MediaQuery.of(ctx).padding.top -
                appBar.preferredSize.height,
            color: Colors.red,
          )
        ],
      ),
    ),
  ),
);
}

这是我的主要小部件，所以我必须使用Builder 创建上下文。但是，它仍然不等于设备高度的 100%。 24px 太多了。我不想减去 24px，因为它在另一台设备上可能更多/更少。这个例子有什么问题？

【问题讨论】：

你会在 appBar 和 statusBar 之后得到总高度 height: MediaQuery.of(ctx).size.height，这实际上会自动减少一些东西。不要隐瞒任何事情。
我不确定。我试过了，而不是 24px 太多，我现在有 80px 太多了。我想我需要减去AppBar 高度和StatsBar 填充，但它仍然不等于剩余的设备高度。
尝试使用LayoutBuilder 并用SafeArea 小部件包裹它，然后您可以在LayoutBuilder 的构建器函数中访问您想要的高度！参考见this
尝试将 Container 小部件包装为 Builder 的父级
自从我开始使用颤振MediaQuery.of(context).size.height 一直提供设备的完整高度。问题是问题。如果您希望容器填充高度，请将其包装在 Expanded 小部件中

标签： flutter responsive

【解决方案1】：

您不需要对Scaffold 的孩子做任何特别的事情。除非子小部件管理自己的大小，否则默认情况下它将填充Scaffold 内的整个剩余区域。在Container 的情况下，它的行为是将换行收缩到其子代的大小，但如果它没有子代，它将填满所有可用空间。所以你可以这样做：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Hello World'),
    ),
    body: Container(
      color: Colors.red,
    ),
  );
}

根据子小部件的不同，您可能需要手动配置尺寸，但大多数布局小部件要么您无需担心，要么只需进行一些配置。以Column 为例，如果您设置mainAxisSize: MainAxisSize.max 和crossAxisAlignment: CrossAxisAlignment.stretch，那么它也会自动拉伸以填充所有可用空间。然后，您也可以使用Expanded 根据可用空间来调整其子项的大小。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Hello World'),
    ),
    body: Column(
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Expanded(
          child: Container(color: Colors.red),
        ),
        Expanded(
          child: Container(color: Colors.green),
        ),
        Expanded(
          flex: 2,
          child: Container(color: Colors.yellow),
        ),
      ],
    ),
  );
}

但是，在极少数情况下，您需要确切的可用空间数量，您通常不想使用MediaQuery，因为这会得到整个屏幕的大小，而不仅仅是可用空间，而且您通常必须执行额外的计算才能将其归结为您实际寻找的大小（这通常会导致错误的结果，正如您所发现的那样）。

相反，您可以使用LayoutBuilder。请注意，您不要滥用LayoutBuilder，因为它会向其子级添加额外的布局步骤，因此在您的代码中包含大量布局步骤很容易降低您的应用程序的速度。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Hello World'),
    ),
    body: LayoutBuilder(
      builder: (context, constraints) {
        final width = constraints.biggest.width;
        final height = constraints.biggest.height;
        return Center(
          child: Text('Width: $width, Height: $height'),
        );
      },
    ),
  );
}

【讨论】：