在上下文中调用MediaQuery.of()时，即使在应用程序中未使用MediaQuery，也不会显示MediaQuery错误 - 腾讯云开发者社区

文章/答案/技术大牛

发布

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

在本文中，我将向您展示在设计响应式布局时可以遵循的一些方法。在使用Flutter构建响应式布局之前，我想说明一下Android和iOS是如何处理不同屏幕大小的布局的。 1....在Android中，要在单个屏幕上显示多个UI视图，请使用Fragments，它们类似于可在应用程序的Activity中运行的可重用组件。...您可以在一个Activity中运行多个Fragment，但是不能在一个应用程序中同时运行多个Activity。...它们像积木一样拼凑在一起构建应用程序画面。记住，在Flutter中，每个屏幕和整个应用程序也是一个widget!...与此同时，您还将学习为大屏幕构建布局的另一个重要概念，即分屏视图(一个屏幕上显示多个页面)。响应式布局：在不同大小的屏幕上使用不同的布局。我们将建立一个名叫Flow的聊天应用程序。

3.2K0 0

Flutter 强大的MediaQuery控件

通常情况下，不会直接将MediaQuery当作一个控件，而是使用MediaQuery.of获取当前设备的信息，用法如下： var data = MediaQuery.of(context); 此方式必须放在...在移动设备上，通常是全屏。 systemGestureInsets 显示屏边缘上系统“消耗”的区域输入事件，并阻止将这些事件传递给应用。...比如在Android Q手势滑动用于页面导航（ios也一样），比如左滑退出当前页面。...accessibleNavigation 用户是否使用诸如TalkBack或VoiceOver之类的辅助功能与应用程序进行交互，用于帮助视力有障碍的人进行使用。..._2" style="zoom:50%;" /> 使用场景根据尺寸构建不同的布局 SafeArea控件就是通过MediaQuery.of来实现的，平板和手机的（或者横屏和竖屏）布局可能是不一样的，比如如下布局

1.2K0 0

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

是的

没有找到

Flutter 强大的MediaQuery控件

1.1K0 0

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

上，如下图所示，在弹出键盘和未弹出键盘的情况下，可以看到 MediaQueryData 里一些参数的变化：viewInsets 在没有弹出键盘时是 0，弹出键盘之后 bottom 变成 336 padding...又和键盘状态有关系，所以：键盘的弹出可能会导致使用 MediaQuery.of(context) 的地方触发 rebuild，举个例子：如下代码所示，我们在 MyHomePage 里使用了 MediaQuery.of...试想一下，如果你在每个页面开始的位置都是用了 MediaQuery.of(context) ，然后打开了 5 个页面，这时候你在第 5 个页面弹出键盘时，也触发了前面 4 个页面 rebuild，自然而然可能就会出现卡顿...那么如果我不在 MyHomePage 的 build 方法直接使用 MediaQuery.of(context) ，那在 EditPage 里弹出键盘是不是就不会导致上一级的 MyHomePage...MediaQuery 来做一些拦截处理，比如设置文本不可缩放，但是其实这样会导致键盘在弹出和收起时，触发各个页面不停 rebuild ，比如在 Page 2 弹出键盘的过程，Page 1 也在不停

1.5K2 0

【Flutter 专题】94 初识 MediaQuery

，但一般通过 MediaQuery.of(context) 来获取相关信息；当相关信息发生变化，例如屏幕旋转等时，屏幕中 Widget 会重新构建，以保持最新状态；我们可以通过 MediaQuery...7. accessibleNavigation accessibleNavigation 为是否使用 TalkBack 或 VoiceOver 之类的辅助功能与应用程序进行交互，用以辅助视力障碍人群；...11. boldText boldText 为平台是否要求使用粗体； print('是否使用粗体 -> ${MediaQuery.of(context).boldText}'); ?...13. viewInsets viewInsets 为键盘弹出时等遮挡屏幕边距，其中 viewInsets.bottom 为键盘高度； print('键盘遮挡内边距 -> ${MediaQuery.of...，因此不会影响此值； print('系统手势边距 -> ${MediaQuery.of(context).systemGestureInsets}'); ?

1.2K3 1

如何在flutter中构建响应式布局（第五节）

使用相同的代码库使您的应用程序适应如此多样的屏幕尺寸和像素密度始终是一个挑战。在 Flutter 中设计响应式布局没有硬性规定。在本文中，我将向您展示一些在设计此类布局时可以遵循的方法。...4.矢量图形与使用像素位图创建相反，矢量图形是在 XML 文件中定义为路径和颜色的图像。它们可以缩放到任何大小而不会缩放工件。在 Android 中，您可以将?...在 Android 中，要在单个屏幕上显示多个 UI 视图，您可以使用 Fragments，它们就像可以在应用程序的 Activity 内运行的可重用组件。...让我们在构建示例响应式应用程序时学习最后一个概念。构建响应式应用程序现在，我们将应用我在上一节中描述的一些概念。除此之外，您还将学习构建大屏幕布局的另一个重要概念：拆分视图。...您仍然可以对此应用程序进行许多改进，其中之一可能是根据不同的屏幕尺寸定义不同的fontSize。在使用响应能力时，您可以使用的一些令人惊叹的 Flutter 插件如下： ?

4.1K1 0

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

最近刚好有网友咨询一个问题，那就顺便借着这个问题给大家深入介绍下 Flutter 中键盘弹起时，Scaffold 的内部发生了什么变化，让大家更好理解 Flutter 中的输入键盘和 Scaffold...首先如下图所示，我们在 Scaffold 的源码里可以看到，当resizeToAvoidBottomInset 为 true 时，会使用 mediaQuery.viewInsets.bottom 作为...接着看 _ScaffoldLayout ，在 _ScaffoldLayout 进行布局时，会通过传入的 minInsets 来决定 body 显示的 contentBottom ，所以可以看到事实上传入的...里使用了 Scaffold ，并且 CustomWidget 在 MainWidget 里被使用；分别在这两个 Widget 的build 方法里打印出对应的 MediaQuery.of(context...会被重载，所以使用的 context 位置不同，获取到的 MediaQueryData 也不同，如果需要获取键盘高度和状态栏高度的话，最好使用 Scaffold 外的 context 。

2.6K2 0

Flutter 旋转轮

在在本文中，我们将探讨 “Flutter 中的旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项的「Spinwheel」演示程序。...它显示了如何在flutter应用程序中使用「flutter_spinwheel」软件包运行「旋转轮」，并显示了当您点击该项目时，旋转器将移动。同样，您将沿顺时针/逆时针的任何方向移动微调器。...**onChanged：**此属性用于在每次更改选择时从微调器菜单返回所选值的回调。「select」：此属性用于选择（突出显示）圆的扇区。范围是0（项目大小）。想象它就像一个数组。...**在此构建器中，我们将添加itemCount和itemBuilder。在itemBuilder中，我们将导航容器小部件。在小部件内，我们将添加一个边距，即容器的高度。...在此程序包中，我们将添加」size」表示将在其上绘制圆形微调器的正方形，「item」表示将在微调器上显示该大小。

11.8K2 0

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

不用怕，在flutter中为我们提供了一个叫做MediaQuery的利器，大家一起来看看吧。 MediaQuery详解 MediaQuery从名字上来看，它的意思是媒体查询。...在InheritedWidget中可以实现of方法，通过调用BuildContext.dependOnInheritedWidgetOfExactType来从context中获取最临近的InheritedWidget...简单来说，viewPadding是固定的，它的大小不会随键盘的显示而发生变化，Padding是可变化的，当键盘弹起，系统状态栏被遮罩的时候，它的bottom值就是0。...我们可以看到返回了一个新的MediaQuery，其中data部分使用了MediaQuery.of(context)来获取context最近的MediaQuery，然后调用它的removePadding方法将对应的...MediaQuery的使用讲完MediaQuery的构造函数，接下来我们看一下MediaQuery常用的使用场景。

1.1K2 0

抖音的强大对手来了，用Flutter手撸一个抖音国际版，看看有多炫

, ); }, ); 然后在需要引用的位置加入: import 'package:flutter_gen/gen_l10n/app_localizations.dart'; 调用的位置...home_top_foryou 至此，国际化就完成了另外本地针对播放模块进行了优化，将代码拆分到videoplayer.dart文件.一来是方便代码阅读，而来可以作为子组件使用，其他的代码写得太冗余也在继续拆开...(context).size.width, // heigth: MediaQuery.of(context).size.height, //...(context).size.width, height: MediaQuery.of(context).size.height, color:...则显示加载的图标loading 当snapshot.connectionState == ConnectionState.done 时，此时数据已经加载完毕，但是加载完毕有可能也没有数据，所以需要判断不同的情况

1.4K2 0

Flutter之屏幕适配

Flutter 暂时没有官方的屏幕适配方案，在 Flutter 项目开发中目前大部分的适配方案都是通过比例来进行适配，是一个通用的适配方法，该适配方法也在前端、Android、iOS、小程序等开发中广泛使用...但是如果有特殊需求也可以使用高度来进行适配，比如需求要求是 banner 占屏幕的 1/4 ，或者要求内容刚好一屏显示，这个时候设置控件的高度时就可以采用高度单位来进行适配。...flutter_screenutil：让你的UI在不同尺寸的屏幕上都能显示合理的布局!...that was passed to MediaQuery.of()....因为这个时候还没加载 MaterialApp 无法使用 MediaQuery.of(context ) 获取到屏幕宽高关于上面两种初始化方法，flutter_screenutil 作者推荐使用第二种方式

2.7K2 0

Flutter 实现刮刮卡效果

现金返还是一种提高使用户粘度的有效举动。对于普通用户来说，这简直就是彩票，无论如何，您是否会说您是一位被UI惊呆了并且需要在您的应用程序中实现等效功能的应用程序开发人员？...在这个博客，我们将探讨 Flutter 中刮刮卡效果。我们将了解如何在flutter应用程序中使用scratcher包实现刮板卡。...它可以具有广泛的使用案例；但是，它基本上用于为应用程序用户创建随机奖品。该演示视频演示了如何在Flutter中创建刮刮卡。它显示了刮卡将如何工作使用scratcher在Flutter应用程序包。...它显示打开的对话框，然后显示刮刮卡，您将获得收入。它会显示在您的设备上。属性 scratcher的一些属性是： **child：**此属性用于声明容器和不同的Widget。...**onChange：**显示该区域的新部分时，将使用此属性进行回调。 **color：**此属性用于设置刮板卡的颜色。 **image：**此属性用于在刮刮卡上声明图片。

6.6K2 0

Flutter入门三部曲(3) - 数据传递状态管理

然后从这个类中，去调用获取状态的方法。(Android开发的同学应该很熟悉的套路，类似Picasso、Glide)。但事实上是这样吗？...MediaQuery.of()....MediaQuery是我们存在在BuildContext中的属性。其次，可以看到MediaQuery存储在的BuildContext中的位置是在WidgetsApp....然后在子树的任何地方，都可以通过这样的方式来进行获取。定义一个AppState 了解了MediaQuery的存放方式，我们可以实现自己的状态管理，这样在子组件中，就可以同步获取到状态值。...所以让我们再改一下代码，点击push出新的页面，在新页面内改变appState的状态，看看就页面会不会发生变化。

1.5K0 0

Flutter 小技巧之优化你使用的 BuildContext

一般情况下处理这个问题也很简单，那就是增加 mounted 判断，通过 mounted 判断就可以避免上述的错误。...那么到这里我们收获了一个小技巧：使用 BuildContext 时，在必须时我们需要通过 mounted 来保证它的有效性。...如下代码所示，在这个例子里：我们添加了一个列表，使用 builder 构建 Item 每个列表都有一个点击事件点击列表时我们模拟网络请求，假设网络也不是很好，所以延迟个 5 秒之后我们滑动列表让点击的...直接在 build 里调用肯定可以，虽然 build 会被比较频繁执行，但是 of(context) 操作其实就是在一个 map 里通过 key - value 获取泛型对象，所以对性能不会有太大的影响...最后，今天主要分享了在使用 BuildContext 时的一些注意事项和技巧，如果你对于这方面还有什么疑问，欢迎留言评论。

1.7K0 0

Flutter完整开发实战详解(八、实用技巧与填坑)

，熟悉它的朋友知道我们可以通过 MediaQuery.of(context).size 去获取屏幕大小。...参数，其实在上一篇我们已经说过， Container 其实只是对各种布局的封装，内部的 margin 和 padding 其实是通过 Padding 实现的，而 Padding 不支持负数，所以如果你需要用到负数的情况下...其中 BoxDecoration 一般应用在 DecoratedBox 、 Container 等控件，这种实现一般都是直接 Canvas 绘制时，针对当前控件的进行背景圆角化，并不会影响其 child...你可以直接使用 PageView + TabBar 去实现，然后 tab 切换时使用 _pageController.jumpTo(MediaQuery.of(context).size.width...方法，每次都会被调用。

2.9K2 0

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar “作者：坚果华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA...本文将向您展示如何使用NavigationRail和BottomNavigationBar在 Flutter 中创建自适应布局。我们将浏览一下这个概念，然后通过一个完整的例子来在实践中应用这个概念。...当屏幕很大时，我们显示NavigationRail，当屏幕较小时，我们显示BottomNavigationBar。一次只出现其中一个。...要检测屏幕宽度，我们可以使用： MediaQuery.of(context).size.width 例子应用预览我们要构建的应用程序有一个导航栏、一个底部标签栏和 4 个不同的视图：主页、Feed、...如果屏幕宽度小于 640 像素，则将呈现底部标签栏，而不会显示左侧导航栏。如果屏幕宽度等于或大于 640 像素，则不会呈现底部标签栏，而会显示左侧导航栏。

2.8K5 0

Flutter入门三部曲(3) - 数据传递状态管理

4K5 1

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

在本教程中，我将向您展示如何使用 Flutter 制作一个简单的笑话生成器应用程序对于这个项目，我们将从 RESTful API 获取数据 API的链接：随机笑话对于这个项目，我不会关注应用程序的 UI，我们只会关注如何从 URL 中获取数据，以及如何显示它们...在我们开始之前，您必须将此包添加到您的 pubspec.yaml 文件中依赖项：http：^0.12.2 有关 HTTP 包的更多信息，请访问：HTTP 包 Flutter 源代码： import...height: 30.0, ), Card( child: Container( width: MediaQuery.of...(context).size.width * 0.85, height: MediaQuery.of(context).size.height * 0.6,

8681 0

Flutter 上的一个 Bug 带你了解键盘与路由的另类知识点

image 如上图所示，可以看到在键盘 B 页面打开后，退回上一个页面 A 时键盘已经收起，但是原先键盘所在的区域在 A 页面变成了空白，而 A 页面内容也被 resize 成了键盘弹出后的大小。...在 Flutter 中 Scaffold 默认情况下 resizeToAvoidBottomInset 为 true，当 resizeToAvoidBottomInset 为 true 时，Scaffold...官方的解释是： “可以被系统显示的区域，通常是和设备的键盘等相关，当键盘弹出时 viewInsets.bottom 对应的就是键盘的顶部。”...所以这里只需要将 MediaQueryData.fromWindow 换成 MediaQuery.of(context) 就可以解决问题，而当在没有 context 或者需要直接使用 MediaQueryData.fromWindow...})); 最后说一句，虽然这个 bug 并不复杂，但是恰好能带出挺多经常忽略的知识点，所以长篇介绍这么多，也希望这样的 bug 解决思路，可以帮助到大家在日常开发过程中解决更多问题。

1.6K8 0

Flutter之GetX集成及使用详解

ever 当数据发生改变时触发 everAll 和 "ever "很像，只是监听的是多个响应式变量的变化，当其中一个发生变化就会触发回调 once 只在变量第一次被改变时被调用 debounce 防抖，...ever(count, (newValue) => print("$newValue has been changed")); ///只有在变量count在第一次被改变时才会被调用。...GetBuilder 进行包裹，这样使用 Controller 中的数据变化时，调用 update() 后就会刷新界面控件。...///只有当第一次使用Get.find时，CounterController才会被调用。...GetUtils GetX 还提供了很多工具方法，可以使用 GetUtils 调用，比如判断是否是邮箱，判断文件格式类型等，详细见下图：除此之外 GetX 还提供了一些扩展方法： //检查应用程序在哪个平台上运行

11.4K4 6

点击加载更多

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

Flutter 强大的MediaQuery控件

Flutter 强大的MediaQuery控件

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

【Flutter 专题】94 初识 MediaQuery

如何在flutter中构建响应式布局（第五节）

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

Flutter 旋转轮

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

抖音的强大对手来了，用Flutter手撸一个抖音国际版，看看有多炫

Flutter之屏幕适配

Flutter 实现刮刮卡效果

Flutter入门三部曲(3) - 数据传递状态管理

Flutter 小技巧之优化你使用的 BuildContext

Flutter完整开发实战详解(八、实用技巧与填坑)

在 Flutter 中使用 NavigationRail 和 BottomNavigationBar【Flutter专题33】

Flutter入门三部曲(3) - 数据传递状态管理

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

Flutter 上的一个 Bug 带你了解键盘与路由的另类知识点

Flutter之GetX集成及使用详解

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐