PC 与移动端适配：响应式布局实战

为什么要响应式

Flutter 可以跑在手机、平板、桌面和 Web 上。不同尺寸下，不能只靠固定宽高。响应式布局的关键是根据可用宽度决定结构：手机一列，平板两列，桌面左右分栏。

常用工具

• MediaQuery：获取屏幕尺寸、像素密度、系统字体缩放等。
• LayoutBuilder：根据父组件给到的最大宽度进行布局。
• FractionallySizedBox：按比例控制尺寸。
• ConstrainedBox：限制最大宽度，PC 上常用。

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

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isDesktop = constraints.maxWidth >= 900;
        return Center(
          child: ConstrainedBox(
            constraints: const BoxConstraints(maxWidth: 1180),
            child: isDesktop
                ? Row(children: const [Expanded(child: Menu()), Expanded(flex: 3, child: Content())])
                : const Content(),
          ),
        );
      },
    );
  }
}

断点建议

常见断点可以简单设为：小于 600 为手机，600 到 1024 为平板，大于 1024 为桌面。不要到处散落 magic number，最好统一封装成工具方法或常量。