Flutter：实战技巧，最新阿里Android高级面试题及答案_mediaquerydata textscalefactor

技巧2：快速创建 StatelessWidget 和 StatefulWidget

=========================================

当编写 Flutter 代码时，在编辑框里输入 stl 可以自动弹出创建 StatelessWidget 的模板选项。

而当输入 stf 时，会弹出创建 StatefulWidget 的模板选项。

技巧3：获取状态栏高度和禁止字体缩放

==================

一般我们可以通过 MediaQuery.of(context).size 获取到屏幕的大小，另外，在 MediaQuery 内部有一个 MediaQueryData 的参数，这个参数保存了很多设备的相关信息，如其中的 padding.top 代表了状态栏的高度，所以通过如下代码的方式，就可以在需要的地方获取到状态栏高度并且不需要 context：

MediaQueryData.fromWindow(WidgetsBinding.instance.window).padding.top

如果在开发的时候发现有些控件是从状态栏开始布局的，可以在外层包一个 SafeArea，而 SafeArea 内部就是利用 MediaQueryData，针对顶部状态栏和 iPhone X 以上机型的底部安全距离做了 padding 处理，在默认情况下 Scaffold 的 AppBar 内部就使用了 SafeArea。

MediaQueryData 还可以处理字体缩放。在 MediaQueryData 内的 textScaleFactor 表示系统字体的缩放信息，默认大小是跟随系统而变化的。

如果不希望应用跟随系统字体缩放而缩放，可以在需要的页面下进行嵌套设置，将 textScaleFactor 设置为 1 来禁止应用内的字体缩放：

MediaQuery(

data: MediaQueryData.fromWindow(WidgetsBindin

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

g.instance.window)

.copyWith(textScaleFactor: 1),

child: new Container(),

);

技巧4：实现页面异步加载

============

Flutter 可以通过 FutureBuilder 或者 StreamBuilder 简单实现页面的异步加载。

FutureBuilder 和 StreamBuilder 是通过 Future 和 Stream 获取数据后实现页面布局。如下代码所示：

import ‘package:flutter/material.dart’;

class Test extends StatelessWidget {

const Test({Key key}) : super(key: key);

Future mockNetworkData() async {

await Future.delayed(Duration(seconds: 3));

return “success”;

}

@override

Widget build(BuildContext context) {

return Container(

color: Colors.white,

child: Scaffold(

body: Center(

child: FutureBuilder(

future: mockNetworkData(),

builder: (BuildContext context, AsyncSnapshot snapshot) {

// 根据结果返回不同页面

switch (snapshot.connectionState) {

case ConnectionState.none:

return Text(‘start…’);

case ConnectionState.active:

case ConnectionState.waiting:

return SizedBox(

width: 60,

height: 60,

child: CircularProgressIndicator(

valueColor:

new AlwaysStoppedAnimation(Color(0xff000000))),

);

case ConnectionState.done:

if (snapshot.hasError)

return Text(‘Error: ${snapshot.error}’);

return Text(‘Result: ${snapshot.data}’);

}

return null; // unreachable

},

),