获取屏幕各种尺寸
获取屏幕各种尺寸主要主要使用 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: <Widget>
)
- 监听键盘是否弹起
通过监测 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<MyHomePage> 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");
}
});
}
...
...
...