泊头做网站的,网页设计与网站建设书籍,怎么用word做一个网站,网站开发设计文员文章目录 1. 问题描述2. 优化方法2.1 缩小范围2.2 替代方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何获取AppBar的高度相关的内容#xff0c;本章回中将介绍关于MediaQuery的优化.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 问题描述
我们在… 文章目录 1. 问题描述2. 优化方法2.1 缩小范围2.2 替代方法 3. 示例代码4. 内容总结 我们在上一章回中介绍了如何获取AppBar的高度相关的内容本章回中将介绍关于MediaQuery的优化.闲话休提让我们一起Talk Flutter吧。 1. 问题描述
我们在前面章回中介绍获取屏幕参数时使用过MediaQuery类主要通过它来获取MediaQueryData对象然后从MediaQueryData对象中获取屏幕相关的参数。比如 常用的屏幕长度和宽度不过在使用时如果遇到键盘弹出或者隐藏时会引起Scaffold进行重绘(rebuild),而且是多次重绘这种重绘显然不合理它会导致不必要的 性能开销本章回中将介绍如何优化这种不合理的重绘。
2. 优化方法
明白我们遇到的问题后我们介绍如何去解决这个问题我们提供了两种解决方法在接下来的小节中将介绍这两种方法。
2.1 缩小范围
我可以在使用MediaQuery的地方嵌套一个Build组件这样可以让重绘只发生在Build组件内部进而不影响页面中其它的组件。这种做法相当是缩小了重绘范围。
2.2 替代方法
我们还可以使用MediaQuery.sizeof()代替原来的方法不过这种办法有一定的局限性比如viewInsetOf方法就没有效果。它仍然会进行重绘。我推测它需要计算 键盘高度因此才去重绘。不过只是推测而已真实的原因还需要查看源代码后才能明白。
3. 示例代码 Widget build(BuildContext context) {// double screenWidth MediaQuery.of(context).size.width;// double screenHeight MediaQuery.of(context).size.height;///使用下面的方法代替上面的方法可以减少页面重绘double screenWidth MediaQuery.sizeOf(context).width;double screenHeight MediaQuery.sizeOf(context).height;debugPrint(build running);///键盘高度没有键盘弹出时为0// debugPrint(keyboard 1: ${MediaQuery.of(context).viewInsets.bottom});///这个方法不会减少页面重绘,可见只对sizeof有效果。// debugPrint(keyboard 1: ${MediaQuery.viewInsetsOf(context).bottom});///底部安全区域高度没有时为0// debugPrint(keyboard 2: ${MediaQuery.of(context).viewPadding.bottom});///没有实际意义// debugPrint(keyboard 3: ${MediaQuery.of(context).viewInsets.top});///顶部状态栏的高度// debugPrint(keyboard 4: ${MediaQuery.of(context).viewPadding.top});return Scaffold(appBar: AppBar(title: const Text(Example of Scaffold Overlay),),body: Stack(children: [Positioned(top: 400,left: 0,///嵌套一层builder就不会引起页面重绘child: Builder(builder: (context) {double y MediaQuery.of(context).size.height;debugPrint(build running of builder);return Text(check rebuilding value: ${y.toString()});}),),///键盘自动弹出时会导到MediaQuery进行页面重绘有两种解决方法更换接口嵌套builderconst Positioned(top: 450,left: 0,width: 300,height: 56,child: TextField(),),],),);}上面的示例代码中大量使用了MediaQuery类在页面中包含一个输入框当我们点击输入框时会自动弹出键盘此时可以看到代码中添加的日志出现在了运行结果中 这表明页面发生了生绘具体点讲就是build方法在运行而且会运行多次输入完成后点击键盘上的确认键键盘会自动隐藏此时也会发生重绘。我们使用上一小 节介绍的两种优化方法后再次在输入框中输入内容此时页面不会发生重绘。我在这里就不演示具体的运行结果了建议大家自己动手去实践。
4. 内容总结
最后我们对本章回的内容做一个全面的总结
页面中使用MediaQuery类后当键盘自动弹出和隐藏时会引起页面重绘使用Build组件来缩小重绘范围这样可以避免页面发生重绘使用MediaQuery中的其它方法可以避免重绘不过不是所有方法都有效果 看官们与关于MediaQuery的优化相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
