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

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

1 个答案: