Flutter 中的 ScaffoldMessenger 和 MediaQuery 是什么?

Flutter 中的 ScaffoldMessenger 是什么?

ScaffoldMessenger 是 Flutter 2.0 版本中引入的一个类,用于在 Scaffold 小部件中管理和显示瞬态消息,也称为 snackbar 或 toast 通知。

在 Flutter 2.0 之前,您可以使用 Scaffold.of(context) 来显示 SnackBar。但是,这种方法在很多情况下都存在问题,例如,当您需要从一个不是 Scaffold 的直接后代(例如,Scaffold 的深嵌套子代)的部件中显示一个 SnackBar 时。

随着 ScaffoldMessenger 的引入,这个问题得到了解决,ScaffoldMessenger 提供了比以前更可靠和易用的方法。

下面是一个使用 ScaffoldMessenger 来显示 SnackBar 的基本示例:

dart 复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MyHomePage(),
  ));
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ScaffoldMessenger Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Show a Snackbar using ScaffoldMessenger
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Hello, Snackbar!'),
              ),
            );
          },
          child: Text('Show Snackbar'),
        ),
      ),
    );
  }
}

在这张截图中,我们展示了一个 Snackbar ScaffoldMessenger。

在这个例子中,我们使用 ScaffoldMessenger.of(context) 来获取当前 BuildContext 的 ScaffoldMessenger 实例,然后在 ScaffoldMessenger 上调用 showSnackBar 来显示 SnackBar。

需要注意的是,ScaffoldMessenger 必须在 Scaffold 上下文中使用,如果尝试在 Scaffold 之外使用它,将会遇到错误,另外,在显示 snackbars 时,最好使用 ScaffoldMessenger 而不是 Scaffold.of(context),以避免任何潜在的运行时问题。

因此,ScaffoldMessenger 提供了一种更可靠、更值得推荐的方式来在 Flutter 应用程序的 Scaffold 中显示瞬态消息。

Flutter 中的 MediaQuery 是什么?

在 Flutter 中,MediaQuery 是一个类,它提供访问当前设备屏幕或显示器最重要的信息的接口,它允许你获取屏幕尺寸、方向等信息。

MediaQuery 类通常用于创建响应式 Flutter 应用程序,以适应各种屏幕大小和方向。

要访问 Flutter 小部件中的 MediaQuery 实例,可以使用 MediaQuery.of(context) 方法,该方法检索小部件树中最近的 MediaQuery 祖先,并返回包含设备屏幕信息的 MediaQueryData 对象。

下面是一个使用 MediaQuery 的基本示例:

dart 复制代码
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    MediaQueryData mediaQueryData = MediaQuery.of(context);
    double screenWidth = mediaQueryData.size.width;
    double screenHeight = mediaQueryData.size.height;
    double pixelDensity = mediaQueryData.devicePixelRatio;
    Orientation orientation = mediaQueryData.orientation;
    return Scaffold(
      appBar: AppBar(
        title: Text('MediaQuery Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Screen Width: $screenWidth'),
            Text('Screen Height: $screenHeight'),
            Text('Pixel Density: $pixelDensity'),
            Text('Orientation: ${orientation == Orientation.portrait ? 'Portrait' : 'Landscape'}'),
          ],
        ),
      ),
    );
  }
}

这是MediaQuery的屏幕截图

  • 在这个例子中,我们使用 MediaQuery.of(context) 来访问 MediaQueryData 对象,然后提取和显示有关屏幕宽度、屏幕高度、像素密度和设备在应用程序 UI 中的方向的信息。
  • MediaQuery 是创建适应不同设备的响应式 Flutter 布局的关键工具,通过使用 MediaQueryData 中的设备属性,你可以创建在各种屏幕尺寸和方向上看起来很棒的 UI。
相关推荐
慧一居士7 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead9 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app