Flutter中如何实现应用根据手机屏幕尺寸自动适配？

Hey，我太懂你这种在不同模拟器里跑Flutter app，结果padding歪了、宽度撑爆、图片错位、文字对齐乱掉的崩溃感！其实Flutter本身就带了一堆工具帮你搞定自适应，我把常用的实用方法整理给你，都是实战里验证过的：

1. 用MediaQuery获取屏幕上下文信息 #

这是最基础的适配手段，通过MediaQuery.of(context)能拿到当前设备的屏幕宽度、高度、像素密度、文本缩放比例这些关键参数，所有布局都基于这些动态值来设置，就不会出现固定数值导致的适配问题。

示例代码：

final mediaQuery = MediaQuery.of(context);
final screenWidth = mediaQuery.size.width;
final screenHeight = mediaQuery.size.height;
final textScaleFactor = mediaQuery.textScaleFactor;

// 比如设置一个占屏幕宽度80%的容器
Container(
  width: screenWidth * 0.8,
  padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.05),
  child: Text(
    "自适应文本",
    style: TextStyle(fontSize: 16 * textScaleFactor),
  ),
)

2. 用LayoutBuilder做响应式布局 #

如果你的布局需要根据父组件的可用空间调整（比如在小屏是单列，大屏是双列），LayoutBuilder就派上用场了——它能拿到父组件的约束条件（最大/最小宽高），你可以根据这些条件切换布局结构。

示例代码：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      // 大屏设备：双列布局
      return Row(
        children: [
          Expanded(child: LeftPanel()),
          Expanded(child: RightPanel()),
        ],
      );
    } else {
      // 小屏设备：单列布局
      return Column(
        children: [
          LeftPanel(),
          RightPanel(),
        ],
      );
    }
  },
)

3. 用相对尺寸组件替代固定值 #

Flutter提供了一堆不需要写死数值的组件，从根源上避免适配问题：

• FractionallySizedBox：按父组件尺寸的百分比设置宽高，比如widthFactor: 0.9就是占90%宽度
• Expanded/Flexible：在Row/Column里自动分配剩余空间，避免固定宽度导致溢出
• AspectRatio：强制保持宽高比，适合图片、卡片这类需要固定比例的元素

示例代码（图片适配）：

AspectRatio(
  aspectRatio: 16/9, // 宽高比16:9
  child: Image.network(
    "https://example.com/image.jpg",
    fit: BoxFit.cover, // 图片铺满容器，裁剪多余部分
  ),
)

4. 文本自适应：避免固定字体大小 #

固定字体大小在小屏会挤成一团，大屏又显得太小，推荐两种实用方式：

• 结合MediaQuery.textScaleFactor：跟着用户系统的文本缩放设置走，保证 accessibility
• 使用AutoSizeText包：自动调整字体大小以适应容器宽度（需要先在pubspec.yaml引入依赖）

示例代码（AutoSizeText）：

AutoSizeText(
  "这是一段可能很长的文本，会自动缩小字体适应容器",
  maxLines: 1,
  style: TextStyle(fontSize: 20), // 最大字体大小限制
)

5. 统一主题配置，减少重复代码 #

把常用的间距、字体大小、颜色都放到ThemeData里，用相对值定义，这样全局统一调整，不用每个页面都写一遍适配逻辑。

示例代码：

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyLarge: TextStyle(
        fontSize: 16 * MediaQuery.textScaleFactorOf(context),
        height: 1.5,
      ),
      titleLarge: TextStyle(
        fontSize: 24 * MediaQuery.textScaleFactorOf(context),
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

最后几个实战小技巧 #

• 绝对不要用固定的像素数值：比如width: 200这种硬编码，换成百分比或者基于MediaQuery的动态值
• 多测试极端设备：Flutter模拟器可以切换各种屏幕尺寸（包括折叠屏、平板），跑一遍就能发现隐藏的适配问题
• 用SingleChildScrollView兜底：如果某些布局在小屏容易溢出，套个SingleChildScrollView避免页面崩溃

内容的提问来源于stack exchange，提问作者praveen Dp