Flutter 自适应布局一套代码适配手机和平板（十二）

一、为什么需要自适应布局？

Flutter 可以运行在手机、平板、电脑和网页上，但这些设备的屏幕尺寸差异巨大。如果你只为手机设计界面，在大屏幕上就会浪费大量空间；如果只为大屏设计，在手机上又会挤成一团。

自适应布局的思路是：根据屏幕宽度，自动选择不同的布局方案。

二、认识 LayoutBuilder

LayoutBuilder是实现自适应布局的核心组件。它能告诉你父组件给了多少可用空间，然后你根据这个空间大小决定返回什么 Widget。

// LayoutBuilder 的基本用法 LayoutBuilder( // builder 回调中的 constraints 包含了可用空间信息 // constraints.maxWidth → 最大可用宽度 // constraints.maxHeight → 最大可用高度 builder: (context, constraints) { // 判断屏幕是否够宽 if (constraints.maxWidth > 600) { // 宽屏：返回并排布局 return Row(children: [sidebar, details]); } else {