Flutter: MediaQuery
2023-09-14 08:58:44 时间
使用MediaQuery根据不同的屏幕大小调整应用程序的UI布局。 您还可以使用它根据用户布局首选项进行UI调整。
class _MyHomeState extends State<MyHome> {\
@override
Widget build(BuildContext context) {
MediaQueryData deviceData = MediaQuery.of(context);
// 屏幕信息
Size screenSize = deviceData.size;
// 设备方向
Orientation deviceOrientation = deviceData.orientation;
bool isPortrait = true;
if (deviceOrientation == Orientation.portrait) {
// print('竖屏:更高');
isPortrait = true;
} else if (deviceOrientation == Orientation.landscape) {
// print('横屏: 更宽');
isPortrait = false;
}
// 默认字体大小
double fontScaling = deviceData.textScaleFactor;
// 屏幕各个部分,flutter自动提供了一个安全区域
EdgeInsets notchInset = deviceData.padding;
print(notchInset);
// 辅助信息,是否禁用了动画
bool noAnimations = deviceData.disableAnimations;
print(noAnimations);
// 系统UI的大小
print(MediaQuery.of(context).viewPadding.bottom);
// 当前App亮度模式
Brightness screenContrast = deviceData.platformBrightness;
print(screenContrast);
return Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: Column(
children: <Widget>[
Container(
child: Text(
screenSize.width.toString(),
style: TextStyle(fontSize: 30),
),
),
Container(
child: Text('默认字体大小: $fontScaling'),
),
Container(
height: 100.0,
decoration: BoxDecoration(
color: isPortrait ? Colors.green : Colors.purple,
),
),
],
),
);
}
}
相关文章
- Flutter入门(二)--布局
- flutter:使用listview之二:下拉刷新(flutter 3.7.0)
- Flutter TextField 文本输入框的基本属性及详解
- Flutter进阶第6篇: 获取设备信息 以及 使用高德Api获取地理位置
- flutter 自动轮播翻页
- flutter map类型怎么传双引号
- flutter 倒计时
- flutter provide
- Flutter 官网的列表点击收藏
- Flutter实战之Flutter应用生命周期 AppLifecycleState浅析
- Flutter之路由系列之Navigator简析
- 【Flutter】开发中遇到的问题:如何设置背景图片
- Flutter AppBar 自定义顶部导航按钮 图标、颜色 以及 TabBar 定义顶部 Tab 切换