第四百零四回 如何获取AppBar的高度

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

1. 概念介绍

我们在上一间章回中介绍了获取屏幕参数相关的内容，同时也提到AppBar的高度容易与屏幕顶部状态栏的高度混淆，不过没有介绍获取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.

4. 内容总结

最后，我们对本章回的内容做一个全面的总结：

• 页面中AppBar的高度需要通过计算才可以获得；
• 页面中子组件的长度和宽度不能超过容器的长度和宽度；
• 我们巧妙地通过程序的错误信息计算出了AppBar的高度，不过实际中不推荐这样去做；

看官们，与"如何获取AppBar的高度"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!