Flutter的SafeArea 和 MediaQuery的用法及其应用场景

本文链接：https://blog.youkuaiyun.com/Joe0217/article/details/145100536

在 Flutter 中，SafeArea 和 MediaQuery 是两个非常有用的 widget，它们帮助开发者创建响应式和适应不同屏幕尺寸及设备特性的用户界面。下面将详细介绍这两个 widget 的用法及其应用场景。

SafeArea

SafeArea 是一个用于确保内容不会被设备的边缘（如状态栏、导航栏、圆角屏幕或打孔屏等）遮挡的 widget。它自动为这些区域添加内边距（padding），使得你的应用布局更加美观且易于阅读。

使用场景

当你希望 UI 元素不被设备的非交互区域（如 iPhone X 及更新机型的状态栏、底部小圆角）遮挡时。
确保文本和其他重要元素不会出现在屏幕的安全区域内。

示例代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，SafeArea 确保了即使是在有顶部状态栏或底部导航栏的设备上，文本也不会被遮挡。

SafeArea 参数

top: 是否在顶部添加安全区域，默认为 true。
bottom: 是否在底部添加安全区域，默认为 true。
left: 是否在左侧添加安全区域，默认为 true。
right: 是否在右侧添加安全区域，默认为 true。
minimum: 设置最小的安全区域 padding，类型为 EdgeInsets，可以用来增加额外的空间。

例如，如果你只想避免顶部的状态栏遮挡，而允许其他部分延伸到屏幕边缘，你可以这样设置：

SafeArea(
  top: true,
  bottom: false,
  left: false,
  right: false,
  child: ...
)

MediaQuery

MediaQuery 提供了一种获取当前设备屏幕信息的方法，包括屏幕尺寸、像素密度、方向等。这有助于创建自适应的布局，并根据不同的设备特性调整 UI。

使用场景

获取屏幕宽度和高度来动态调整布局大小。
检测设备的方向（横屏或竖屏）以改变界面布局。
根据设备的字体缩放比例调整文本大小。

示例代码：获取屏幕尺寸

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('MediaQuery Example')),
        body: Center(
          child: Builder(
            builder: (BuildContext context) {
              final mediaQuery = MediaQuery.of(context);
              final screenWidth = mediaQuery.size.width;
              final screenHeight = mediaQuery.size.height;

              return Text(
                'Screen Width: $screenWidth\nScreen Height: $screenHeight',
                textAlign: TextAlign.center,
              );
            },
          ),
        ),
      ),
    );
  }
}

示例代码：响应式布局

你可以结合 LayoutBuilder 或直接使用 MediaQuery 来构建响应式的布局：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Responsive Layout')),
        body: LayoutBuilder(
          builder: (context, constraints) {
            if (constraints.maxWidth > 600) {
              // 宽度大于 600 时使用大屏幕布局
              return LargeScreenLayout();
            } else {
              // 否则使用小屏幕布局
              return SmallScreenLayout();
            }
          },
        ),
      ),
    );
  }
}

class LargeScreenLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Large Screen Layout'));
  }
}

class SmallScreenLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Small Screen Layout'));
  }
}

常见属性

size: 返回 Size 对象，包含屏幕宽度和高度。
orientation: 返回 Orientation 枚举值，表示设备是处于 portrait（竖屏）还是 landscape（横屏）模式。
padding: 返回 EdgeInsets 对象，代表屏幕的安全区域 padding。
textScaleFactor: 返回文本缩放因子，通常用于调整字体大小。
devicePixelRatio: 返回设备的像素密度比，即每英寸点数（DPI）。

结合使用 SafeArea 和 MediaQuery

为了确保 UI 不仅响应于屏幕尺寸的变化，而且也能适应设备的安全区域，通常会将 SafeArea 和 MediaQuery 结合起来使用。例如：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: LayoutBuilder(
            builder: (context, constraints) {
              if (constraints.maxWidth > 600) {
                return LargeScreenLayout();
              } else {
                return SmallScreenLayout();
              }
            },
          ),
        ),
      ),
    );
  }
}