Question

我找到了一些有关计算颤动高度的主题，但没有一个回答我的问题。我正在尝试计算抖动中的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，因为在其他设备上可能更多/更少。这个例子有什么问题？

Answer 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'),
        );
      },
    ),
  );
}

计算颤振中的100％高度

1 个答案: