Flutter响应式设计求助：新手开发者多屏适配问题咨询

针对你使用Column、Row等基础布局在不同屏幕显示效果不一致的问题，下面是几个无需额外依赖包的实用适配方案：

1. 基于MediaQuery的动态尺寸适配 #

直接通过MediaQuery.of(context)获取当前设备的屏幕宽高、像素密度等参数，用比例值替代固定数值设置组件尺寸与间距，适配不同屏幕：

Container(
  width: MediaQuery.of(context).size.width * 0.8, // 占屏幕宽度80%
  height: MediaQuery.of(context).size.height * 0.3, // 占屏幕高度30%
  padding: EdgeInsets.symmetric(
    horizontal: MediaQuery.of(context).size.width * 0.05,
    vertical: 12, // 小间距可保留固定值，也可按比例设置
  ),
  color: Colors.blueAccent,
)

2. 利用Flex组件的弹性属性 #

Row/Column本身属于Flex组件，通过Expanded、Flexible控制子组件的弹性占比，让布局自动填充可用空间，避免固定尺寸导致的溢出或留白：

Row(
  children: [
    Expanded(
      flex: 2, // 占2份宽度
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1, // 占1份宽度
      child: Container(color: Colors.green),
    ),
  ],
)

如果子组件内容可能超出屏幕，可替换为Wrap组件，实现自动换行/换列。

3. 用LayoutBuilder做分场景布局 #

LayoutBuilder能获取父组件的可用尺寸范围，根据不同宽度/高度切换布局结构，适配手机竖屏、横屏或平板等不同场景：

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      // 宽屏场景用Row横向布局
      return Row(children: [
        Container(width: 200, color: Colors.grey),
        Expanded(child: Container(color: Colors.white)),
      ]);
    } else {
      // 窄屏场景用Column纵向布局
      return Column(children: [
        Container(height: 150, color: Colors.grey),
        Expanded(child: Container(color: Colors.white)),
      ]);
    }
  },
)

4. 用AspectRatio和FittedBox控制比例与缩放 #

• AspectRatio强制组件保持固定宽高比，避免拉伸变形；
• FittedBox让子组件按比例适配父容器，防止内容溢出：

AspectRatio(
  aspectRatio: 16/9, // 保持16:9宽高比
  child: Container(
    child: FittedBox(
      fit: BoxFit.contain, // 按比例缩放，不裁剪内容
      child: Image.asset('assets/banner.png'),
    ),
  ),
)

5. 响应式文本适配 #

避免固定字体大小，通过屏幕比例或系统文本缩放因子调整字号：

Text(
  '响应式文本示例',
  style: TextStyle(
    fontSize: MediaQuery.of(context).size.width * 0.05, // 按屏幕宽度比例设置
    // 或跟随系统文本缩放
    fontSize: 16 * MediaQuery.of(context).textScaleFactor,
  ),
)

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