Flutter 深入响应式布局的关键逻辑

刚开始用 Flutter 的时候，大家常常会给 Widgets 设置固定宽高，比如 width: 375 或 height: 800，这样在手机上看起来还算凑合。可一旦切换到平板或桌面，整个界面就拉伸得面目全非，像被扭曲了似的。

真正做到跨手机、平板、桌面的自适应布局，关键不是堆砌复杂组件，而是建立一套基于约束条件的思维模式。我在复现一个响应式 Demo 时，把原本乱糟糟的 main.dart 重新拆解，这种模块化开发对维护大项目至关重要。先从实操基础说起，别在 main.dart 直接堆代码，得先规范工程结构。

第一步：重塑工程目录结构

避免把业务逻辑全塞进 main.dart，建议根据功能拆分文件夹，比如把页面层独立成单独文件：

lib/
├── screens/
│   └── home_screen.dart
└── main.dart

第二步：搭建基本骨架

main.dart 只负责程序入口和全局设置，比如 Material 3 主题。我建议把 debugShowCheckedModeBanner 关掉，开发时更清爽。

import 'package:flutter/material.dart';
import 'package:responsive_layout/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Responsive Layout Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: Colors.blue,
        brightness: Brightness.light,
      ),
      home: const HomeScreen(),
    );
  }
}

第三步：构建响应式框架

现在在 lib/screens/home_screen.dart 创建真正的页面。这里用 StatefulWidget，因为响应式布局常涉及窗口大小变化时状态的动态调整。

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    // 这是添加 LayoutBuilder 或 MediaQuery 的核心位置
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive UI')),
      body: const Center(child: Text('等待布局逻辑注入')),
    );
  }
}

先用 VS Code 运行代码。如果你用的是 Windows 或 macOS，直接选桌面端 Target 执行，会看到一个干净的白屏界面。这意味着你的项目骨架已建好，接下来才是引入 LayoutBuilder 或 MediaQuery 处理具体断点逻辑。

布局时，如果屏幕变宽，组件显得怪异，检查是不是在 Row 或 Column 里用了没有约束的 Expanded，或者直接用了硬编码像素值。