MediaQuery.of(context).padding为零 - 腾讯云开发者社区

文章/答案/技术大牛

发布

【Flutter 专题】94 初识 MediaQuery

2. devicePixelRatio devicePixelRatio 为像素密度；与设备物理像素有关，与横竖屏等无关； print('屏幕像素比 -> ${MediaQuery.of(context...6. alwaysUse24HourFormat alwaysUse24HourFormat 为当前设备是否为 24 小时制； print('24 小时制 -> ${MediaQuery.of(context...8. invertColors invertColors 为是否使用颜色反转，主要用于 iOS 设备； print('颜色反转 -> ${MediaQuery.of(context).invertColors...11. boldText boldText 为平台是否要求使用粗体； print('是否使用粗体 -> ${MediaQuery.of(context).boldText}'); ?...12. padding padding 为屏幕内边距，一般是刘海儿屏或异形屏中被系统遮挡部分边距； print('内边距 -> ${MediaQuery.of(context).padding}');

1.2K3 1

Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

Flutter 里大家应该都离不开 MediaQuery ，比如通过 MediaQuery.of(context).size 获取屏幕大小，或者通过 MediaQuery.of(context).padding.top...为什么时不时通过 MediaQuery.of(context) 获取的 padding ，有的 top 为 0 ，有的不为 0 ，原因就在于你获取的 context 来自哪里。...(context).padding ：class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context...) { print("MyHomePage MediaQuery padding: ${MediaQuery.of(context).padding}"); return Scaffold...) { print("ScaffoldChildPage MediaQuery padding: ${MediaQuery.of(context).padding}"); return Container

1.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

) { /// 获取当前的 padding 信息 , 报错位置 ; final EdgeInsets edgeInsets = MediaQuery.of(context).padding...that was passed to MediaQuery.of()....二、解决方案 ---- 获取 Padding 信息 , /// 获取当前的 padding 信息 , 报错位置 ; final EdgeInsets edgeInsets = MediaQuery.of...(context).padding; 需要在 MaterialApp 中进行获取 , 这里将上述代码重新进行封装 , 将 MediaQuery 调用的代码 , 封装到 MaterialApp 组件内部...) { /// 获取当前的 padding 信息 final EdgeInsets edgeInsets = MediaQuery.of(context).padding; return

7642 0

Flutter 中键盘弹起时，Scaffold 发生了什么变化

) { print("Main MediaQuery padding: ${MediaQuery.of(context).padding} viewInsets.bottom: ${MediaQuery.of...) { print("Custom MediaQuery padding: ${MediaQuery.of(context).padding} viewInsets.bottom: ${MediaQuery.of...(context).padding 和 MediaQuery.of(context).viewInsets.bottom 的值；如下图所示，在键盘弹起和不弹起时可以看到 padding 值是不同的，...image 为什么 padding 值的 top 会不一致，自然是因为 CustomWidget 和 MainWidget获取到的 MediaQuery.of(context) 对象不是同一个数据。...事实上这就是大家为什么有时候 MediaQuery.of( context) 可以获取到状态栏高度，有时候又获取不到的原因，因为你的 context 获取到的是 Scaffold 之外的 MediaQueryData

2.6K2 0

【Flutter】五彩纸屑动画效果

默认设置为定向。「shouldLoop」：该属性用于确定emissionDuration 是否会重置，从而导致连续的粒子被发射。...默认 maxBlastForce 设置为“20”。「blastDirection」：该属性用于径向值确定粒子发射方向。默认设置为“PI”（180 度）。PI 的值将发射到画布/屏幕的左侧。...默认设置为“10”。...(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.5, )...(context).size.width*0.5, height: MediaQuery.of(context).size.height*0.5,

1.8K1 0

Flutter 强大的MediaQuery控件

获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内，否则会抛出异常，MaterialApp和WidgetsApp...textScaleFactor 单位逻辑像素字体像素数，如果设置为1.5则比指定的字体大50%。...padding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏。...viewPadding 被系统遮挡的部分，通常指“刘海屏”或者系统状态栏，此值独立于padding和viewInsets，它们的值从MediaQuery控件边界的边缘开始测量。...var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0); return Scaffold( appBar:

1.1K0 0

Flutter 强大的MediaQuery控件

1.2K0 0

Flutter 实现刮刮卡效果

这些刮刮卡用于为用户提供奖品和现金返还。它可以具有广泛的使用案例；但是，它基本上用于为应用程序用户创建随机奖品。该演示视频演示了如何在Flutter中创建刮刮卡。...在此屏幕中，我们将创建一个Container，并将对齐方式设置为中心。内部子属性添加一个**FlatButton。...(context).size.height*0.2, width: MediaQuery.of(context).size.width*0.6,...在刮板内部，我们将添加刮板卡的颜色，增加刮板的精度以提高性能，为刮板区域的百分比级别添加阈值，并为刮板在刮擦期间的不同尺寸添加brushSize。...(context).size.height*0.2, width: MediaQuery.of(context).size.width*0.6,

6.6K2 0

【Flutter 专题】53 图解 BackdropFilter 高斯模糊

(context).size.width * 0.5, height: MediaQuery.of(context).size.width * 0.5, child...( padding: EdgeInsets.all(14.0), child: Image.asset('images...(context).size.width * 0.5, height: MediaQuery.of(context).size.width * 0.5, child: Stack...(children: [ Padding( padding: EdgeInsets.all(14.0), child: Image.asset...Container( width: MediaQuery.of(context).size.width, height: MediaQuery.of

1.9K4 1

Flutter 强大的MediaQuery控件

获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内，否则会抛出异常，MaterialApp和WidgetsApp...MediaQueryData MediaQueryData是MediaQuery.of获取数据的类型。...padding、viewPadding和viewInsets的区别如下： ?...布局代码如下： var screenSize = MediaQuery.of(context).size; if(screenSize.width>oneColumnLayout){ //平板布局...var _data = MediaQuery.of(context).copyWith(textScaleFactor: 2.0); return Scaffold( appBar:

7162 0

flutter系列之:查询设备信息的利器:MediaQuery

不用怕，在flutter中为我们提供了一个叫做MediaQuery的利器，大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看，它的意思是媒体查询。...或者你可以将其理解为字体的放大程度。比如textScaleFactor=1.5，那么它的意思是呈现出来的字体要比给定的字体大50%。...我们可以看到返回了一个新的MediaQuery，其中data部分使用了MediaQuery.of(context)来获取context最近的MediaQuery，然后调用它的removePadding方法将对应的...padding属性删除。...) { double deviceWidth = MediaQuery.of(context).size.shortestSide; if (deviceWidth > 900) return

1.1K2 0

flutter制作具有自定义导航栏的渐进式 Web 应用程序

) { return Scaffold( body: Container( height: MediaQuery.of(context).size.height..., width: MediaQuery.of(context).size.width, child: Stack( children: [...) { return Positioned( left: 100.0, child: Container( height: MediaQuery.of(context...).size.height, width: MediaQuery.of(context).size.width * 0.63, color: Colors.white,...(context).size.height, width: MediaQuery.of(context).size.width * 0.28, child: Column

3.6K0 0

flutter制作具有自定义导航栏的渐进式 Web 应用程序

3.1K2 0

使用 Flutter 制作一个简单的笑话生成器应用程序

@override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner...height: 30.0, ), Card( child: Container( width: MediaQuery.of...(context).size.width * 0.85, height: MediaQuery.of(context).size.height * 0.6,...child: Padding( padding: const EdgeInsets.all(12.0), child: Column...( padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical:

8671 0

端开发技术——解密Flutter响应式布局

Size screenSize = MediaQuery.of(context).size; Orientation orientation = MediaQuery.of(context).orientation...Size screenSize = MediaQuery.of(context).size; return Scaffold( body: Row( children...Orientation deviceOrientation = MediaQuery.of(context).orientation; return Scaffold( body...) { Orientation deviceOrientation = MediaQuery.of(context).orientation; return Scaffold(...您还可以定义扩展小部件的flex属性，这将允许您指定每个小部件应该覆盖屏幕的多少部分(默认flex设置为1)。

3.2K0 0

Flutter 系列之GetX的学习(3) --> 其他实用功能

() context.widthTransformer() /// 类似于 MediaQuery.of(context).size context.mediaQuerySize() /// 类似于...MediaQuery.of(context).padding context.mediaQueryPadding() /// 类似于 MediaQuery.of(context).viewPadding...context.mediaQueryViewPadding() /// 类似于 MediaQuery.of(context).viewInsets; context.mediaQueryViewInsets...() /// 类似于 MediaQuery.of(context).orientation; context.orientation() /// 检查设备是否处于横屏模式 context.isLandscape...() /// 检查设备是否处于竖屏模式 context.isPortrait() /// 类似于 MediaQuery.of(context).devicePixelRatio; context.devicePixelRatio

7191 0

Flutter 入门指北之数据持久化

path_provider用于获取手机的存储文件位置，一共有三个方法 getTemporaryDirectory临时目录，在 Android 中对应的方法为 getCacheDir，而在 iOS 中对应为...Container( margin: const EdgeInsets.symmetric(horizontal: 12.0), width: MediaQuery.of...Container( margin: const EdgeInsets.symmetric(horizontal: 12.0), width: MediaQuery.of.../ 获取相应的文件 if (text == null || text.isEmpty) { Fluttertoast.showToast(msg: '请输入内容'); // 内容为空...Container( margin: const EdgeInsets.symmetric(horizontal: 12.0), width: MediaQuery.of

1.9K1 0

Flutter之drawer详细分析（你要的操作都有）

(context).padding.top是获取状态栏的高度，然后自身高度加上状态栏的高度，应该是显示蓝色才对,那会不会跟ListView有关系呢？...image.png 可以直接点击ListView的构造方法，跳转到455行可看到 1.当ListView的属性padding为空时，获取MediaQueryData的信息 2.因为ListView...将原有的MediaQuery的padding复制为left和right都为0 所以，我们只要不让ListView的padding属性为空就可以了，这里我传入一个zero给ListView，然后把DrawerHeader...drawerLabel; } ///new start final double _width=MediaQuery.of(context).size.width*widthPercent...drawerLabel; } final double _width = MediaQuery.of(context).size.width * widget.widthPercent;

4.8K2 1

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

全面屏适配方法 : 在顶部和底部留出足够的安全区域 ; 方案一 : Flutter 中提供了一个 SafeArea 组件 , 使用该组件包裹页面 , 可以实现适配 ; 方案二 : 使用 MediaQuery.of...(context).padding 获取屏幕四个方向上的 Padding ; 四、反面示例 ( 留海遮挡内容 ) ---- 华为 Mate 30 手机中 , 使用如下代码 , 显示的内容 , 顶部没有预留足够的安全区域...runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context...) { /// 获取当前的 padding 信息 final EdgeInsets edgeInsets = MediaQuery.of(context).padding; return...Container( decoration: BoxDecoration( color: Colors.white, ), padding: EdgeInsets.fromLTRB

6.7K2 0

基于flutter3.x+material-design3仿微信App应用实战

// 关于弹窗void aboutAlertDialog(BuildContext context) { showDialog( context: context, builder: (context...shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12.0)), content: Padding...shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(3.0)), content: Padding...) { showDialog( context: context, builder: (context) { return AlertDialog( content...(context).size.height - 120; double swipeX = MediaQuery.of(context).size.width / 2 + 50; setState

1.7K1 0

点击加载更多

【Flutter 专题】94 初识 MediaQuery

Flutter 小技巧之 MediaQuery 和 build 优化你不知道的秘密

【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )

Flutter 中键盘弹起时，Scaffold 发生了什么变化

【Flutter】五彩纸屑动画效果

Flutter 强大的MediaQuery控件

Flutter 强大的MediaQuery控件

Flutter 实现刮刮卡效果

【Flutter 专题】53 图解 BackdropFilter 高斯模糊

Flutter 强大的MediaQuery控件

flutter系列之:查询设备信息的利器:MediaQuery

flutter制作具有自定义导航栏的渐进式 Web 应用程序

flutter制作具有自定义导航栏的渐进式 Web 应用程序

使用 Flutter 制作一个简单的笑话生成器应用程序

端开发技术——解密Flutter响应式布局

Flutter 系列之GetX的学习(3) --> 其他实用功能

Flutter 入门指北之数据持久化

Flutter之drawer详细分析（你要的操作都有）

【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )

基于flutter3.x+material-design3仿微信App应用实战

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐