第四百四十一回
文章目录
- 1. 概念介绍
- 2. 使用方法
- 2.1 获取思路
- 2.2 获取方法
- 3. 示例代码
- 4. 内容总结
我们在上一章回中介绍了"如何获取屏幕相关参数"相关的内容，本章回中将介绍如何获取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的高度，通过运行时的错误，我的是56body: 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的高度"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!