第四百四十二回

文章目录

1. 概念介绍
2. 使用方法
- 2.1 获取思路
- 2.2 获取方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"如何获取屏幕相关参数"相关的内容，本章回中将介绍如何获取AppBar的高度.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在上一间章回中介绍了获取屏幕参数相关的内容，同时也提到AppBar的高度容易与屏幕顶部状态栏的高度混淆，本章回中将介绍如何获取AppBar的高度。

2. 使用方法

2.1 获取思路

我们在获取AppBar高度时不能像获取屏幕参数一样直接读取MediaQueryData类中成员的值，因为MediaQueryData没有提供相关的成员。我们需要通过计算才可以。

我们没有直接去计算，而是巧妙地通过运行时的错误信息来获取AppBar的高度。整体的思路就是故意在页面中放一个超过页面高度的组件，运行时就会报出错误，从错误
信息中获取AppBar的高度值。

2.2 获取方法

有了整体的思路后，我们将介绍具体的实现方法，详细如下：

使用Scaffold组件创建一个页面；
在Scaffold代表的页面中给appBar和body属性赋值；
appBar中只提供title,其它属性先不赋值；
body的属性值为一个Container组件,它只包含一个Text组件；
设置Container组件的宽度为屏幕的宽度，高度为屏幕的高度；

该方法中把Container组件的高度设置为屏幕的高度是不合理的，它已经超过了屏幕的显示范围，不过这是故意为之，通过不合理的过程让程序报错，同时计算出超出屏
幕尺寸的值就可以间接地计算出AppBar的高度。

3. 示例代码

Scaffold(
  appBar: AppBar(
    title: const Text("ListView example AppBar"),
  ),
  ///这个程序可以巧妙地计算出appBar的高度，通过运行时的错误，我的是56
  body: 
      Container(
        color: Colors.lightGreen,
        width: screenWidth,
        height: (screenHeight - statusBarHeight),
        child: Text("body of scaffold"),
      ),
);

上面的程序完全按照获取方法中介绍的步骤来实现，代码中的screenHeight表示屏幕的高度，statusBarHeight表示顶部状态栏的高度。

运行该程序就会出现高度不够用的错误，同时在页面上也会有黄黑条纹进行提示。我们可以在页面上和错误信息中看到具体尺寸值，这个值再减去顶部状态栏的高度就是页中AppBar的高度,下面是运行时的错误信息。///A RenderFlex overflowed by 56 pixels on the bottom.