Flutter能否使用AspectRatio在宽桌面显示器上模拟手机端应用宽高比效果

失效原因 #

• 直接将AspectRatio包裹MaterialApp时，Flutter Web 根节点默认的约束是强制撑满整个浏览器视口，属于紧约束，AspectRatio无法在宽高都被强制指定的场景下生效。

正确实现方式 #

你需要给AspectRatio添加一个提供松约束的父容器，比如Center或者Align，放在根节点位置即可实现自适应16:9比例效果，不需要硬编码固定宽高：

void main() {
  runApp(
    const Center(
      child: AspectRatio(
        aspectRatio: 16 / 9,
        child: MyApp(),
      ),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 保留你原有的MaterialApp配置即可
      home: Scaffold(
        appBar: AppBar(title: const Text("16:9适配示例")),
        body: const Center(child: Text("内容会保持16:9宽高比，不会被拉伸")),
      ),
    );
  }
}

适配效果 #

• 当浏览器视口宽高比大于16:9：应用高度撑满视口，左右两侧自动添加等宽留白
• 当浏览器视口宽高比小于16:9：应用宽度撑满视口，上下两侧自动添加等高留白
• 应用内容始终保持16:9比例，跟随视口大小自适应缩放，不会被拉伸

拓展：自定义留白背景 #

如果需要修改两侧留白的背景色，可在最外层包裹ColoredBox：

void main() {
  runApp(
    ColoredBox(
      color: Colors.grey[200]!, // 自定义留白区域的背景色
      child: const Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: MyApp(),
        ),
      ),
    ),
  );
}

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