Flutter - 无法获取状态栏高度以准确计算可用屏幕高度

Question

我正在尝试创建一个在一列中包含 2 个小部件的测试应用。

第一个应该占据可用高度的 0.2，第二个应该占据可用高度的 0.8。后者是一个可滚动的小部件。

为了计算可用高度，我需要 3 个属性：屏幕高度、状态栏高度和应用栏高度。

我得到了屏幕高度和应用栏高度。

通过大量搜索，我应该能够使用 mediaQuery.padding.top 获得状态栏高度，但是它返回 0。知道为什么吗？

目前，底部溢出了24像素，这显然是状态栏的高度。

var availableHeight = mediaQuery.size.height - mediaQuery.padding.top - appBar.preferredSize.height; //737 - 0 - 56

我正在 Windows 上的 android 模拟器中对其进行测试。设备：Pixel 3，操作系统：Android Pie。

我意识到我可以使用 LayoutBuilder 开箱即用地执行此操作，而无需手动计算可用高度，但我仍然对答案感兴趣。

这是完整的代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    AppBar appBar = AppBar(title: Text("Test"));

    return MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: appBar,
        body: SafeArea(child: Test(appBar))
      )
    );
  }

}

class Test extends StatelessWidget {

  final AppBar appBar;

  Test(this.appBar);

  Widget build(BuildContext context) {
    var mediaQuery = MediaQuery.of(context);
    var availableHeight = mediaQuery.size.height - mediaQuery.padding.top - appBar.preferredSize.height; //737 - 0 - 56

    return Column(
      children: <Widget>[
        Container(
          color: Colors.green,
          height: availableHeight * 0.2,
        ),
        Container(
          height: availableHeight * 0.8,
          child: getScrollable()
        )
      ]
    );
  }

  Widget getScrollable() {
    return SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
                color: Colors.amber,
                height: 600.0
            ),
            Container(
                color: Colors.red,
                height: 600.0
            ),
          ],
        )
    );
  }

}

Answer 1

无需计算任何东西。使用Flex 和Flexible 来定义每个孩子相对于可用空间应该占用多少空间：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    AppBar appBar = AppBar(title: Text("Test"));

    return MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: appBar,
        body: SafeArea(child: Test(appBar))
      )
    );
  }

}

class Test extends StatelessWidget {

  final AppBar appBar;

  Test(this.appBar);

  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Flexible(
          flex: 2,
          child: Container(
            color: Colors.green,
          ),
        ),
        Flexible(
          flex: 8,
          child: getScrollable(),
        )
      ],
    );
  }

  Widget getScrollable() {
    return SingleChildScrollView(
        child: Column(
          children: <Widget>[
            Container(
                color: Colors.amber,
                height: 600.0
            ),
            Container(
                color: Colors.red,
                height: 600.0
            ),
          ],
        )
    );
  }
}