在Main.dart屏幕上找不到MediaQuery小部件祖先 - 腾讯云开发者社区

文章/答案/技术大牛

发布

flutter中的响应式布局

Flutter是一个跨平台的UI框架, 我们能够一次编程就可以手机、PC、web上多端使用。那么，我们如何做到一次编码就可以适配不同的屏幕呢？...总不能只适配手机尺寸，在PC端就可能看起来很丑了，这样用户体验就非常的差了，如下图：大屏幕上显示手机版布局很显然，这不是我们希望看到的结果，这时候就轮到我们的响应式布局...：大屏幕手机屏幕使用drawer 就像我们看到的，在不同屏幕尺寸，我们需要不同的布局方式，是我们的界面更加友好。...但是，不能保证祖先 Scaffold存在（实际上我们在拆分视图模式下没有祖先）。所以我们可以使用Scaffold.maybeOf(context)一些防御性代码来解决这个问题。...通过这些更改，我们可以在移动设备上运行该应用程序，查看菜单Icon，并使用它打开drawer。

3.7K1 0

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

成员之一，专注于大前端技术的分享，包括Flutter,鸿蒙，小程序,安卓，VUE，JavaScript等。”...NavigationRail小部件用于创建位于应用左侧或右侧的“垂直标签栏”。它非常适合平板电脑、笔记本电脑、电视等宽屏设备。它通常包含多个视图，让用户可以轻松地在不同视图之间切换。...BottomNavigationBar小部件用于创建非常适合智能手机的底部标签栏。它由多个选项卡组成，让用户可以轻松地在视图之间导航。...当屏幕很大时，我们显示NavigationRail，当屏幕较小时，我们显示BottomNavigationBar。一次只出现其中一个。...要检测屏幕宽度，我们可以使用： MediaQuery.of(context).size.width 例子应用预览我们要构建的应用程序有一个导航栏、一个底部标签栏和 4 个不同的视图：主页、Feed、

2.8K5 0

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

是的

没有找到

Flutter性能揭秘之RepaintBoundary

Flutter会在屏幕上绘制Widget。如果一个Widget的内容需要更新，那就只能重绘了。尽管如此，Flutter同样会重新绘制一些Widget，而这些Widget的内容仍有部分未被改变。...同时还有一个光标，在客户接触到屏幕的最后一个位置后移动。下面是没有RepaintBoundary的代码。示例在正文中，我们将创建一个Stack widget。...= _offset; } 当我们运行应用程序时，我们应该得到下面屏幕的输出，如屏幕下的视频。如果你试图在屏幕上移动指针，应用程序将非常滞后，因为它重新绘制背景，需要昂贵的计算。...解决上述问题的答案是将CustomPaint部件包装成RepaintBoundary的子Widget。...这是我对RepaintBoundary On User Interaction的一个小的介绍，它在使用Flutter时是可行的。

1.6K2 0

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

Flutter是一个跨平台的应用开发框架，支持各种屏幕大小的设备，它可以在智能手表这样的小设备上运行，也可以在电视这样的大设备上运行。使用相同的代码来适应不同的屏幕大小和像素密度是一个挑战。...例如，你可以在平板电脑等设备上使用分屏视图来提供良好的用户体验，并明智地使用大屏幕。...记住，在Flutter中，每个屏幕和整个应用程序也是一个widget! widget本质上是可重用的，因此在Flutter中构建响应式布局时，您不需要学习任何其他概念。...请记住:MediaQuery和LayoutBuilder之间的主要区别在于，MediaQuery使用屏幕的完整上下文，而不仅仅是特定小部件的大小。...与此同时，您还将学习为大屏幕构建布局的另一个重要概念，即分屏视图(一个屏幕上显示多个页面)。响应式布局：在不同大小的屏幕上使用不同的布局。我们将建立一个名叫Flow的聊天应用程序。

3.2K0 0

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

Flutter 是一个跨平台的应用程序开发框架，支持屏幕尺寸变化很大的设备：它可以在小到智能手表的设备上运行，也可以运行在大电视等设备上。...在 Android 中，要在单个屏幕上显示多个 UI 视图，您可以使用 Fragments，它们就像可以在应用程序的 Activity 内运行的可重用组件。...基本上，它们是可以连接在一起以构建整个应用程序的构建块。请记住，在 Flutter 中，每个屏幕甚至整个应用程序也是小部件！...记住：之间的主要区别MediaQuery和LayoutBuilder是MediaQuery使用屏幕的完整范围内，而不是你的特定图标的只是大小，而LayoutBuilder能够确定特定部件的最大宽度和高度...), ); } } 在这里，我使用OrientationBuilder了LayoutBuilder来breakpointWidth根据方向改变，因为我不想PeopleView在处于横向模式时在小屏幕手机上显示

4.1K1 0

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

我们首先需要在main.dart文件里面将MaterialApp 修改为 GetMaterialApp 其次添加属性defaultTransition 表示默认的路由过渡动画效果: 2. app国际化配置...新建untils文件夹,下面新建一个translations.dart文件.并填入以下定义一个翻译类，实现 Translations 接口在main.dart文件配置默认的语言环境,以及指定语言资源文件...Web 上都独立支持！...// 你可以判断是否在浏览器中运行 // 在 Windows、iOS、OSX、Android 等上 GetPlatform.isWeb // 相当于：MediaQuery.of(context).size.height...context.height // 让你能够定义屏幕的一半、三分之一等。

7251 0

Flutter中构建布局顶

如何垂直和水平布局小部件。如何构建一个Flutter布局。这是在Flutter中构建布局的指南。您将构建以下屏幕截图的布局： ?...然后本指南回过头来解释Flutter的布局方法，并说明如何在屏幕上放置一个小部件。在讨论如何水平和垂直放置小部件之后，会介绍一些最常见的布局小部件。...第6步：把它放在一起在最后一步，你将这些碎片组装在一起。这些小部件安排在ListView中，而不是列中，因为在小设备上运行应用程序时，ListView会自动滚动。...如果您愿意，可以构建仅使用小部件库中的标准小部件的应用程序。如何在Flutter中布置单个小部件？本节介绍如何创建一个简单的小部件并将其显示在屏幕上。...在Flutter中，只需几个步骤即可在屏幕上放置文本，图标或图像。 1.选择一个布局小部件来保存该对象。

48.5K1 0

Flutter 实现刮刮卡效果

它可以具有广泛的使用案例；但是，它基本上用于为应用程序用户创建随机奖品。该演示视频演示了如何在Flutter中创建刮刮卡。它显示了刮卡将如何工作使用scratcher在Flutter应用程序包。...它会显示在您的设备上。属性 scratcher的一些属性是： **child：**此属性用于声明容器和不同的Widget。 **brushSize：**此属性用于在划痕期间提供不同大小的画笔。...在标题中，我们将在中心添加一个列小部件和对齐方式。在该列内，我们将添加文本和一个分隔符。...在容器内，我们将文本，图像和自动换行添加到列窗口小部件。运行应用程序时，我们应该获得屏幕输出，如屏幕下方的捕获。...这是我对Scratch Card On User Interaction的一个小介绍，并且正在使用它。

6.6K2 0

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

“本文主要介绍具有自定义导航栏的渐进式 Web 应用程序让我们准备我们的 - “Main.dart” 我们将整个页面分成几个部分，以便于制定，我建议您这样做以获得更好的编程，让我们更详细地查看这些部分...， NavigationBar()、 DashBoard()、 CalendarSpace()，首先我们可以做导航栏部分 lib/Main.dart import 'package:flutter/material.dart...，它返回 Row() 小部件内的两个“文本”小部件。...，它具有 Ontap() 函数，它被包裹着 - “材料”小部件，并取消材料小部件的默认颜色我们手动使颜色透明。...我们使用 - “MouseRegion” - 小部件来更新小部件大小以使其看起来更好。

3.1K2 0

开始使用-编写你的第一个Flutter应用程序顶

你应该看到下面的屏幕。 ? 意见本示例创建一个Material应用程序。 Material是一种视觉设计语言，在移动设备和网络上是标准的。 Flutter提供了一套丰富的Material小部件。...lib/main.dart 第3步：添加一个有状态的小部件无状态小部件是不可变的，这意味着它们的属性不能改变 - 所有的值都是最终的。有状态的小部件保持在小部件的生命周期中可能改变的状态。...1.将有状态的RandomWords小部件添加到main.dart。它可以在MyApp之外的文件中的任何位置使用，但解决方案将它放在文件的底部。...lib/main.dart 第6步：导航到新的屏幕在这一步中，您将添加一个显示收藏夹的新屏幕（在Flutter中称为路由）。您将学习如何在主路由和新路由之间导航。...lib/main.dart 完成！您已经编写了一个在iOS和Android上运行的交互式Flutter应用程序。在这个codelab中，你有：从头开始创建一个Flutter应用程序。

12.5K2 0

Flutter-Dart全局可拖动悬浮球

padding: MediaQuery.of(context).viewInsets, height: 285, child: ListView(...insertOverlay(BuildContext context) { entry = OverlayEntry(builder: (context) { final size = MediaQuery.of...(moveOffset.dy 屏幕，默认为 0。 ?...0 : moveOffset.dy > maxHeight // 其他情况超出屏幕默认为 maxHeight。 ?...= null) { FocusManager.instance.primaryFocus.unfocus(); } } } 使用在主程序 main.dart 套上我们的 PubScaffold

1.8K1 1

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

本文主要介绍具有自定义导航栏的渐进式 Web 应用程序 gitee github 哔哩哔哩第一节第二节第三节让我们准备我们的 - “Main.dart” 我们将整个页面分成几个部分，以便于制定...，我建议您这样做以获得更好的编程，让我们更详细地查看这些部分， NavigationBar()、 DashBoard()、 CalendarSpace()，首先我们可以做导航栏部分 lib/Main.dart...，它返回 Row() 小部件内的两个“文本”小部件。...，它具有 Ontap() 函数，它被包裹着 - “材料”小部件，并取消材料小部件的默认颜色我们手动使颜色透明。...我们使用 - “MouseRegion” - 小部件来更新小部件大小以使其看起来更好。

3.6K0 0

Flutter 旋转轮

它将在您的设备上显示所选的文本。...**onChanged：**此属性用于在每次更改选择时从微调器菜单返回所选值的回调。「select」：此属性用于选择（突出显示）圆的扇区。范围是0（项目大小）。想象它就像一个数组。...在itemBuilder中，我们将导航容器小部件。在小部件内，我们将添加一个边距，即容器的高度。他的子属性，我们将添加一个列小部件。在此小部件中，我们将添加两个文本，分别是问题和答案。...在此程序包中，我们将添加」size」表示将在其上绘制圆形微调器的正方形，「item」表示将在微调器上显示该大小。...当我们运行应用程序时，我们应该获得屏幕的输出，如屏幕下方的截图所示。

11.8K2 0

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

，这个表明sliver的子部件会使用该MediaQuery的值，根据判断，子部件会使用mediaQueryHorizontalPadding，而上面的两个复制： mediaQueryHorizontalPadding...=>将原有的MediaQuery的padding复制为top和bottom都为0，该值会被子部件使用，所以可以知道，DrawerHeader使用了该值，导致statusBarHeader为0 mediaQueryVerticalPadding...不会铺满你的屏幕 Material => 添加阴影的咦！...image.png 会发现，你的布局左边有一条矩形，这个是什么，我们在左边矩形区域拖动一下看看 ? image.png 诶！我们的Drawer出现了，这是什么回事？...那么，到这里，我们基本上想要监听drawer的弹出跟关闭就是死路一条了。

4.9K2 1

Flutter 组件 | Builder 构造器与 BuildContext 认知

里面的方法很多，稍微瞄一眼，可以看到基本上都是在找东西。 ? 我们会经常使用 Navigator.of(context).push来用于路由的跳转。...比如下面通过 MediaQuery.of(context) 可以获取 MediaQueryData 数据，从而拿到屏幕尺寸、设备分辨率等数据信息，这里核心方法 BuildContext 的 dependOnInheritedWidgetOfExactType...，因为MediaQuery 是在 MaterialApp 内部包含的，这时 context 中是找不到的，所以想要使用 MediaQuery，那就必需将 context 下移到 MaterialApp...一直往下翻，你会看到有一个持有 MediaQuery 的元素，这就说明当前的 ctx 可以上溯寻到该祖先节点。...，是找不到的。

2.7K2 1

Flutter 可折叠边栏

它是一个向左滑动的菜单，在大多数情况下，它包含应用程序中的重要连接，并且在显示时拥有一半的屏幕。该演示视频展示了如何在Flutter中创建可折叠的侧边栏。...它显示了在flutter应用程序中使用foldable_sidebar包可折叠的侧边栏将如何工作。它显示了当用户点击浮动操作按钮时，抽屉将以折叠方式显示/隐藏。它会显示在您的设备上。...在内部，我们将添加drawerBackgroundColor滑动到屏幕上时，是指抽屉的背景色。我们将添加抽屉方式，以创建一个CustomSidebarDrawer（）类。...我们将添加screenContents表示抽屉隐藏时，然后将显示此屏幕。我们将创建一个welcomeScreen（）小部件。我们将深入定义以下代码。...在此小部件中，我们将添加中心小部件。在内部，我们将添加一个列小部件。在列小部件中，我们将添加两个文本，并且mainAxisAlignment为中心。

8.4K5 0

Flutter for OpenHarmony 简单的应用开发详解：从代码到页面的完整构建流程

第二步：编写核心代码 —— main.dart 文件解析我们来看 lib/main.dart 中的核心代码： import 'package:flutter/material.dart'; void...示例场景：假设你想把标题改为“欢迎来到小晚的编程课堂”，只需修改： title: const Text("欢迎来到小晚的编程课堂"), 然后按快捷键，浏览器中的标题就会立刻更新！...展示层面：在本地服务器上呈现美观、响应式的网页界面。交互层面：支持热重载、调试、语音输入等现代开发特性。...建议与扩展方向方向实现方式目标添加路由使用 Navigator.push() 实现“课件”、“知识点”跳转增加状态管理引入 Provider 或 Riverpod 支持动态数据更新优化适配使用 MediaQuery...如果你正在学习 Flutter，不妨动手复制这段代码，在自己的环境中运行一次，亲身体验“所见即所得”的开发魅力！

981 0

Flutter 入门指北之基础部件

Flutter runApp 新建 flutter 项目后，可以看到 lib 下的 main.dart 中 void main() => runApp(MyApp());这句就是程序的入口了。...继承自 StatelessWidget 并在 build 方法返回一个 MaterialApp 实例，(偷偷讲下，其实这边还可以返回 CupertinoApp，这是一个 iOS 风格的 widget，基本上你看到部件带...StatelessWidget 是状态不可变部件，通过其构建的部件一般用来展示固定内容，例如需要展示固定的功能按钮列表，不需要根据不同界面状态进行修改其展示内容 StatefulWidget 是可改变状态的部件...，例如输入法键盘 this.primary = true, // 当前的 Scaffold 是否需要被展示在屏幕最上层 }) 来张图吧，简洁明了 ?...(context).size 获取到的为上层容器的宽高 width: MediaQuery.of(context).size.width),

1.7K3 0

【HarmonyOS NEXT】一次开发多端部署（以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发）

，提供系统级的接口供开发者调用，从而使得一款应用一套代码能同时运行在不同形态的设备上，也能给用户带来很好的交互体验。...封装媒体查询监听断点工具类给我们的业务封装媒体查询监听断点工具类，以便后续使用，在首页生命周期过程中进行调用初始化，利用 LocalStorage 或 AppStorage 保存当前屏幕断点的名称，在应用的任意页面内通过...栅格布局主要由行和列组成，每一行可以分为若干列，在不同断点状态下展示不同数量的列数，根据这一特性，即可制作成在小屏幕上展示一列文本，在大屏幕上展示两列甚至多列文本。...GridRow 设置对应断点时展示的 GridCol 个数即可，无需对 GridCol 设置额外参数scss 代码解读复制代码GridRow({ columns: { xs: 1, // 超小屏幕...1 列（如手表） sm: 1, // 小屏幕 1 列 md: 2, // 中等屏幕 2 列 lg: 3 // 大屏幕 3 列 }, gutter: 15 // gutter

5191 0

Flutter Lesson 3：Flutter组件（widget）前篇

这个文件夹里面主要就是存放我们自己编写的的代码了，其中默认有一个main.dart，这个文件是整个项目的入口文件，而且名字就是要是main.dart。...state 是状态的意思， widget 是(小)部件的意思。 StatelessWidget : 不可变状态窗口部件，也就是你在使用时不可以改变，比如固定的文字（写上后就在那里了，死也不会变了）。...StatefulWidget : 具有可变状态的窗口部件，也就是你在使用应用的时候就可以随时变化，比如我们常见的进度条，随着进度不断变化。...编写Hello World 我们修改我们的main.dart文件。...:Text('Hello World'), ), ), ); } } import 'package:flutter/material.dart';这行代码基本上每一个组件都会用到

1.2K3 0

点击加载更多

flutter中的响应式布局

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

Flutter性能揭秘之RepaintBoundary

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

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

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

Flutter中构建布局顶

Flutter 实现刮刮卡效果

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

开始使用-编写你的第一个Flutter应用程序顶

Flutter-Dart全局可拖动悬浮球

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

Flutter 旋转轮

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

Flutter 组件 | Builder 构造器与 BuildContext 认知

Flutter 可折叠边栏

Flutter for OpenHarmony 简单的应用开发详解：从代码到页面的完整构建流程

Flutter 入门指北之基础部件

【HarmonyOS NEXT】一次开发多端部署（以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发）

Flutter Lesson 3：Flutter组件（widget）前篇

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐