Flutter：如何限制平板端应用宽度为最大手机尺寸？

1. 全局设置限制应用屏幕宽度 #

当然有全局方案，不用给每个页面套Container。最简便的方式是利用MaterialApp的builder属性，把整个应用的内容包裹在一个带宽度限制的组件里：

MaterialApp(
  builder: (context, child) {
    // 设定目标最大宽度（比如主流旗舰手机的宽度，比如480逻辑像素）
    const targetMaxWidth = 480.0;
    final screenWidth = MediaQuery.of(context).size.width;
    
    return Center(
      child: SizedBox(
        width: screenWidth > targetMaxWidth ? targetMaxWidth : double.infinity,
        child: child,
      ),
    );
  },
  home: const YourHomePage(),
  // 其他配置项
)

这个方法会让所有页面在平板等宽屏设备上自动居中，并限制宽度不超过设定值，手机端则正常全屏显示。

2. MediaQuery.size.width的单位 #

MediaQuery.size.width返回的是逻辑像素（Logical Pixels），它是Flutter中与设备无关的单位：

• 不是物理像素：物理像素是屏幕硬件的实际像素点，由MediaQuery.devicePixelRatio和逻辑像素换算（物理像素 = 逻辑像素 × devicePixelRatio）。
• 不是dpi：dpi是每英寸的物理像素数，属于设备硬件参数，可通过MediaQuery.devicePixelRatio间接计算（dpi = devicePixelRatio × 160）。

3. 替代每个页面嵌套Container的其他方案 #

除了全局builder，还有两种实用方案：

自定义基础页面组件 #

封装一个带宽度限制的BasePage，所有业务页面都基于它构建，避免重复代码：

class BasePage extends StatelessWidget {
  final Widget child;
  const BasePage({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    const maxWidth = 480.0;
    final screenWidth = MediaQuery.of(context).size.width;
    
    return Center(
      child: SizedBox(
        width: screenWidth > maxWidth ? maxWidth : double.infinity,
        child: child,
      ),
    );
  }
}

// 业务页面使用示例
class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BasePage(
      child: Scaffold(
        appBar: AppBar(title: const Text('设置')),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: Text('设置内容'),
        ),
      ),
    );
  }
}

使用ConstrainedBox全局包裹 #

如果你的应用根组件不是MaterialApp（比如用CupertinoApp），也可以直接在根组件外层套ConstrainedBox：

runApp(
  LayoutBuilder(
    builder: (context, constraints) {
      const maxWidth = 480.0;
      return Center(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            maxWidth: constraints.maxWidth > maxWidth ? maxWidth : constraints.maxWidth,
          ),
          child: const YourAppRoot(),
        ),
      );
    },
  ),
);

内容的提问来源于stack exchange，提问作者Nemanja Nisic