Flutter: MediaQuery
使用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: MediaQuery的更多相关文章
- Flutter获取屏幕宽高和Widget大小
我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下, ...
- Flutter 强大的MediaQuery控件
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 MediaQuery 通常情况下,不会直接将MediaQu ...
- flutter系列之:查询设备信息的利器:MediaQuery
目录 简介 MediaQuery详解 MediaQuery的属性 MediaQuery的构造函数 MediaQuery的使用 总结 简介 移动的开发中,大家可能最头疼的就是不同设备的规格了,现在设备这 ...
- Flutter学习(一)之MaterialApp和Scaffold组件使用详解
一,前言: MaterialApp和Scaffold是Flutter提供的两个Widget,其中: MaterialApp是一个方便的Widget,它封装了应用程序实现Material Design所 ...
- flutter 学习零碎知识点01
1.Expanded组件 占满可用空间 -----可以到达类似flex布局中 第一列占用大量空间,所以它必须包装在Expanded widget中. 写死的高度改成Expanded自动撑满屏幕如果还 ...
- Flutter 开发小技巧
1.命令行运行flutter run之后iOS报错:Could not install build/ios/iphones/Runner.app on XXXXX. try lunching Xcod ...
- flutter 列表展示
内容: 1.列表展示 2.轮播图 3.其他 本次的内容也是在上一节的基础上进行操作 我们就搞这个story模块. 目录: story.dart story主页面 import 'package:fl ...
- flutter屏幕适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设 ...
- flutter中使用webview
首先要安装一个插件:flutter_webview_plugin dependencies: flutter_webview_plugin: ^0.2.1+2 使用方法: new MaterialAp ...
随机推荐
- Apache Hudi 0.7.0版本重磅发布
重点特性 1. Clustering 0.7.0版本中支持了对Hudi表数据进行Clustering(对数据按照数据特征进行聚簇,以便优化文件大小和数据布局),Clustering提供了更灵活地方式增 ...
- Eclipse+Maven+Spring
1.首先按照how2j教程搭建Maven项目:http://how2j.cn/k/maven/maven-eclipse-maven-project/1332.html 2. 刚建好时没有资源文件夹的 ...
- Java并发包源码学习系列:阻塞队列实现之SynchronousQueue源码解析
目录 SynchronousQueue概述 使用案例 类图结构 put与take方法 void put(E e) E take() Transfer 公平模式TransferQueue QNode t ...
- Spring Cloud,Docker书籍资源、优秀博文等记录
Spring Cloud,Docker书籍资源.优秀博文等记录 Spring Cloud,Docker书籍资源.优秀博文等记录 一.书籍 二.博文地址 三.思维导图Or图片 3.1一张图总结 Dock ...
- Tomcat 核心组件 Connector
Connector是Tomcat的连接器,其主要任务是负责处理浏览器发送过来的请求,并创建一个Request和Response的对象用于和浏览器交换数据,然后产生一个线程用于处理请求,Connecto ...
- Django(视图)
一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应.响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . . 是任何 ...
- linux切割日志
1.vim log.sh,将文件复制进去#!/bin/sh LOG_PATH=/home/tomcat/apache-tomcat-7.0.56/logs/ LOG_NAME=catalina.out ...
- 在线工具生成接入信息mqtt.fx快速接入阿里云
在线工具生成接入信息mqtt.fx快速接入阿里云 在使用阿里云获取的三元组信息进行接入的时候,往往需要加密生成接入信息之后才能进行接入,因此我根据阿里云提供的加密工具实现了一个阿里云物联网平台mqtt ...
- 关于Java注解(annotation)的简单理解
一.什么是注解? 从 JDK5 开始,Java增加对元数据的支持,也就是注解.简单理解就是代码里的特殊标志,这些标志可以在编译,类加载,运行时被读取,并执行相应的处理,以便于其他工具补充信息或者进行部 ...
- Web APP和原生 APP的不同
我们现在手机中的APP,大部分都是混合APP,也就是既用到了原生APP的基础,又用到了Web APP的基础,混合的比例从0%到100%之间不等.更好的了解APP的类型,有助于我们学则合适的测试策略.今 ...