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 的基本示例：

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 的基本示例：

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。