Flutter 初识 MediaQuery

最新推荐文章于 2022-09-26 15:28:34 发布
最新推荐文章于 2022-09-26 15:28:34 发布
阅读量248 收藏
点赞数
分类专栏： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45425105/article/details/115029619
版权

当信息发生变化，例如屏幕旋转等时，屏幕中 Widget 会重新构建，以保持最新状态；我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息

MediaQuery.removePadding() 删除内边距

MediaQuery.removeViewInsets() 删除视图内边距

viewInsets 为键盘弹出时等遮挡屏幕边距，其中 viewInsets.bottom 为键盘高度；

systemGestureInsets 为手势边距，如 Android Q 之后添加的向左滑动关闭页面等；
viewPadding 小菜理解为视图内边距，为屏幕被刘海儿屏或异形屏中被系统遮挡部分，从 MediaQuery 边界的边缘计算；此值是保持不变；例如，屏幕底部的软件键盘可能会覆盖并占用需要底部填充的相同区域，因此不会影响此值；

清风99w
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息
10-26
flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息
media query ios android,Flutter 94: 初识 MediaQuery
weixin_29605669的博客
05-27 253
当我们同时为手机和平板适配编写 app 针对不同屏幕尺寸进行 UI 布局或当用户偏好设置较大字号或是想要最大限度等减少动画等；此时就需要 MediaQuery 来帮我们获取所用设备的信息以及用户设置的偏好信息；MediaQueryMediaQuery 一直存在于 WidgetsApp 和 MaterialApp 中，MediaQuery 继承自 InheritedWidget 是一个单独的 Wid...
flutter自定义显示弹框dialog工具类使用
Over_dose的博客
05-07 1965
我们平时在做一个项目时，肯定会有许多需要显示弹窗的地方。弹窗的样式由UI给出，不用地方有不同的弹窗。想着可以把一些常用的弹窗封装成一个工具类，使用时只需替换不同元素（一般就是文本内容）即可。 话不多说，先上示例效果图： 底部单按钮普通提示弹出框： 底部两按钮普通提示弹出框： 底部弹出列表单项选择弹出框： ...
Flutter 强大的MediaQuery控件
老孟Flutter
03-30 5045
注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 MediaQuery 通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在MediaQuer...
flutter实战-MediaQuery
ITDogFire
07-11 835
        用了两年的flutter，有了一些心得，从今天开始陆续更新一些案例，不虚头巴脑，只求实战有用，以供学习或使用flutter的小伙伴参考，学习尚浅，如有不正确的地方还望各路大神指正，以免误人子弟，在此拜谢~（原创不易，转发请标注来源和作者）注意：无特殊说明，flutter版本为3.0+       
2、Flutter Tips - MediaQuery;
weixin_33859504的博客
04-12 606
MediaQuery   MediaQuery可以建立媒体查询解析给定的子树。   例如，要了解当前媒体的大小（例如，包含您的应用程序的窗口），您可以从MediaQuery.of：MediaQuery.of(context).size返回的ediaQueryData中读取MediaQueryData.size属性。   使用MediaQuery.of查询当前媒体将导致您的窗口小部件在MediaQu...
Flutter 不同终端适配方案
最新发布
01-12
Flutter 提供了多种屏幕适配方案，例如使用 MediaQuery、LayoutBuilder、FittedBox 等Widget 来实现屏幕适配。然而，这些方法都有其局限性，例如 MediaQuery 只能获取当前屏幕的宽高，而 LayoutBuilder 和 ...
Flutter视频微调包-Flutter开发
05-27
用于修剪视频的Flutter软件包具有可自定义的视频修剪器的视频回放控件，还可以检索和存储conv用于修剪视频的Flutter软件包具有可自定义的视频修剪器的视频回放控件，可以检索和存储视频文件，还支持转换为GIF。...
Flutter的视频播放器，拥有金子般的心-Flutter开发
05-27
chewie Flutter的视频播放器，拥有金子般的心。 video_player插件提供了对视频播放的低级访问。 Chewie使用video_p chewie Flutter的视频播放器带有一颗金子般的心。 video_player插件提供了对视频播放的低级访问。 ...
Flutter之Dialog使用和踩坑
weixin_34258782的博客
01-31 1773
简单介绍 最近使用了Flutter的展示对话框的功能，踩了一点坑，顺便做下总结，方便各位以后少踩坑，如果有说错的地方，还请大家指出来。 下面将介绍对话框的几种场景和踩坑。 展示普通对话框 展示包含列表项的对话框 对话框界面需要动态刷新 自定义对话框。 先理解一些东西 对话框本质上是属于一个路由的页面route，由Navigator进行管理，所以控制对话框的显示和隐藏，也是调用Naviga...
Flutter之MediaQuery详细分析
菜鸟博客
05-01 1774
在学习Flutter的时候时不时会看到这个控件的使用，一直对该组件一知半解。本篇博文就梳理下相关知识点。 MediaQuery从源码上看是一个简单不过的Widget： class MediaQuery extends InheritedWidget { /// Creates a widget that provides [MediaQueryData] to its descendants....
flutter控制显示隐藏_Flutter之Dialog使用和踩坑
weixin_39898248的博客
11-29 1858
简单介绍最近使用了Flutter的展示对话框的功能，踩了一点坑，顺便做下总结，方便各位以后少踩坑，如果有说错的地方，还请大家指出来。下面将介绍对话框的几种场景和踩坑。展示普通对话框展示包含列表项的对话框对话框界面需要动态刷新自定义对话框。先理解一些东西对话框本质上是属于一个路由的页面route，由Navigator进行管理，所以控制对话框的显示和隐藏，也是调用Navigator.of(contex...
flutter系列之:查询设备信息的利器:MediaQuery
程序那些事
09-26 1264
移动的开发中，大家可能最头疼的就是不同设备的规格了，现在设备这么多，如何才能在诸多的设备中找到合适的widget的位置来进行绘制呢？不用怕，在flutter中为我们提供了一个叫做MediaQuery的利器，大家一起来看看吧。MediaQuery是flutter中一个非常方便的工具，用来检测media的属性情况，根据MediaQuery，我们可以做出更加富有交互性的APP。更多内容请参考最通俗的解读，最深刻的干货，最简洁的教程，众多你不知道的小技巧等你来发现！
Flutter MediaQuery简单使用
大灰狼的小绵羊哥哥的博客
11-29 3207
1.通过MediaQuery.removePadding可以移除元素的pandding，需要注意要指定移除哪个方向的padding，例如移除上面的padding MediaQuery.removePadding( removeTop: true, context: context, child: , ) 2.获取状态栏高度 import 'dart:ui'; MediaQueryData.fromWindow(window)
Flutter自定义对话框，禁用系统返回按钮 - WillPopScope
sourceopen的博客
04-02 1267
使用WillPopScope即可，重点onWillPop方法: Future<bool> _onWillPop()=>new Future.value(false); 由于要弹出dialog，我这里是禁掉返回按钮，当然也可以在这里做一下其他操作，比如连续点击两次返回，又或者连续pop两次把dialog和页面一起返回掉。 import 'package:flutter/mate...
添加和移除子视图控制器（child ViewController）
热门推荐
静影沉璧
11-08 1万+
// add child viewController UIViewController* controller = [self.storyboard instantiateViewControllerWithIdentifier:@”test”]; [self addChildViewController:controller]; controller.view.fr
WindowInsets - 布局的监听器
weixin_45365889的博客
08-26 5968
如果您已经看过我的Becoming a Master Window Fitter谈话，您就会知道处理窗口插件可能很复杂。 最近，我一直在改进几个应用程序中的系统栏处理，使他们能够在状态和导航栏后面绘制。 我想我已经提出了一些方法，可以使处理插入更容易(希望如此)。 在导航栏后面绘制 对于本文的其余部分，我们将使用BottomNavigationView进行一个简单的示例，该示例位于屏...
Flutter之解决组件顶部padding
一花一世界 一叶一菩提
09-26 1813
在Flutter的一些组件中像ListView布局的时候，顶部会预留出一部分；比如这样： 解决方法： 在布局中使用 MediaQuery.removePadding(context,context,child:null,removeTop: true) 即可 ...
FLUTTER return MediaQuery
05-26
在Flutter中，MediaQuery是一个非常有用的小部件，它可以提供当前屏幕的尺寸和设备像素比等信息。您可以使用MediaQuery.of(context)方法来获取当前上下文中的MediaQueryData对象，然后使用该对象获取所需的信息。 当您在构建UI时需要根据屏幕尺寸动态调整大小时，可以使用MediaQuery。例如，如果您想在不同的屏幕大小上显示不同的字体大小，您可以使用以下代码： ``` return Text( 'Hello World', style: TextStyle(fontSize: MediaQuery.of(context).size.width / 20), ); ``` 这将根据屏幕宽度自动调整字体大小。如果您想在不同的屏幕尺寸上显示不同的布局，则可以使用MediaQuery来调整布局大小和位置。 另外，您还可以使用MediaQuery来确定设备的方向。例如，以下代码将在设备横向时显示一个文本，而在设备纵向时不显示。 ``` return MediaQuery.of(context).orientation == Orientation.landscape ? Text('Landscape mode') : Container(); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值