Flutter 知识点

获取屏幕各种尺寸

获取屏幕各种尺寸主要主要使用 MediaQuery.of(context) 或者 MediaQueryData.fromWindow(window)，MediaQuery.of(context)需要拿到 BuildContext 之后才能调用。MediaQueryData.fromWindow(window) 需要 import 'dart:ui';。

1、获取屏幕尺寸

MediaQuery.of(context).size;
// 或
MediaQueryData.fromWindow(window).size;

2、获取屏幕宽度

MediaQuery.of(context).size.width;
// 或
MediaQueryData.fromWindow(window).size.width;

3、获取屏幕高度

MediaQuery.of(context).size.height;
// 或
MediaQueryData.fromWindow(window).size.height;

4、获取状态栏高度（顶部安全距离）

MediaQuery.of(context).padding.top;
// 或
MediaQueryData.fromWindow(window).padding.top;

5、获取底部安全距离

MediaQuery.of(context).padding.bottom;
// 或
MediaQueryData.fromWindow(window).padding.bottom;

键盘相关

• 为指定的输入框弹出键盘

FocusScope.of(context).requestFocus(yourFocusNode);

• 关闭键盘

FocusScope.of(context).unfocus();

• 点击页面空白处收回键盘

GestureDetector(
onTap: (){
    FocusScope.of(context).unfocus();
},
child: 
)

• 监听键盘是否弹起

通过监测 MediaQuery.of(context).viewInsets.bottom 的数值来判断键盘是否弹起，当键盘弹起的时候 MediaQuery.of(context).viewInsets.bottom 的值为键盘的高度。

可以在 didChangeMetrics 方法中监测

完成代码如下：

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State with WidgetsBindingObserver {
  FocusNode firstFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    // 注册监听
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // 移除监听
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  // 页面大小规模发生变化的回调方法
  @override
  void didChangeMetrics() {
    super.didChangeMetrics();
    // 在页面重新渲染完成之后再去获取 `MediaQuery.of(context).viewInsets.bottom`
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      final value = MediaQuery.of(context).viewInsets.bottom;
      if (value > 0) {
        print("键盘弹起：$value");
      }
    });
  }

...
...
...