Flutter如何实现响应式布局

在Flutter中如何实现响应式布局？目前我的应用需要适配不同屏幕尺寸的设备，比如手机、平板和桌面端。尝试过MediaQuery和LayoutBuilder，但遇到横竖屏切换时布局错乱的问题。想请教大家：1) Flutter官方推荐的响应式方案是什么？2) 如何处理不同屏幕尺寸的断点设置？3) 有没有成熟的第三方库可以简化实现？希望有实际项目经验的朋友能分享具体代码示例。

2 回复

Flutter中可通过MediaQuery获取屏幕尺寸，结合LayoutBuilder、Expanded、Flexible等组件实现响应式布局。使用条件判断或百分比布局适配不同屏幕。

更多关于Flutter如何实现响应式布局的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


Flutter 中实现响应式布局的核心是根据屏幕尺寸动态调整 UI。以下是主要方法和代码示例：

1. MediaQuery 获取屏幕信息

double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;

2. LayoutBuilder 动态构建布局

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return _buildTabletLayout();
    } else {
      return _buildMobileLayout();
    }
  },
)

3. 使用 Expanded/Flexible

Row(
  children: [
    Expanded(
      flex: 2, // 占比 2/3
      child: Container(color: Colors.red),
    ),
    Expanded(
      flex: 1, // 占比 1/3
      child: Container(color: Colors.blue),
    ),
  ],
)

4. 响应式断点设计

class Responsive {
  static bool isMobile(BuildContext context) => 
    MediaQuery.of(context).size.width < 600;
  
  static bool isTablet(BuildContext context) => 
    MediaQuery.of(context).size.width >= 600 && 
    MediaQuery.of(context).size.width < 1200;
  
  static bool isDesktop(BuildContext context) => 
    MediaQuery.of(context).size.width >= 1200;
}

5. OrientationBuilder 处理横竖屏

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait
      ? _buildPortraitLayout()
      : _buildLandscapeLayout();
  },
)

完整示例：

Widget build(BuildContext context) {
  return Scaffold(
    body: LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return Row(children: [Sidebar(), Expanded(child: Content())]);
        } else {
          return Column(children: [AppBar(), Expanded(child: Content())]);
        }
      },
    ),
  );
}

最佳实践：

  • 使用相对单位而非固定尺寸
  • 结合 AspectRatio 保持比例
  • 通过 FractionallySizedBox 按比例设置尺寸
  • 使用 Wrap 替代 Row 实现自动换行

这些方法可以灵活适配不同屏幕尺寸，实现真正的响应式布局。

回到顶部