Flutter 做响应式布局如果不理清逻辑

其实做一个能适配手机、平板、甚至桌面端的响应式布局，核心不在于你用了多少个复杂的组件，而在于你有没有建立起一套“基于约束”的思维。我最近在复现一个响应式 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());
}

![Flutter 做响应式布局如果不理清逻辑](/uploads/articles/32c6eef8617fa8f5.webp)

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，或者直接用了硬编码的像素值。