Flutter中如何使用flutter_screen_util和responsive_framework实现响应式布局

在Flutter项目中同时使用flutter_screen_util和responsive_framework时，如何协调两者的适配逻辑避免冲突？我目前用flutter_screen_util按设计稿像素做基础缩放，但想用responsive_framework实现断点响应式布局。问题是：

  1. 两个库的缩放机制是否会互相干扰？
  2. 在断点切换时如何保持flutter_screen_util的缩放比例？
  3. 有没有推荐的分工方案（比如用哪个库处理字体/间距，哪个处理布局重构）？
    求实际项目中的最佳实践示例。
2 回复

使用flutter_screen_util时，通过ScreenUtilInit初始化，用.h/.w设置尺寸。responsive_framework则通过ResponsiveBreakpoints定义断点，用ResponsiveScaledBox包裹应用。两者可结合使用，前者处理像素适配，后者处理布局响应。

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


在Flutter中，flutter_screen_util 和 responsive_framework 是两个常用的响应式布局库，它们可以结合使用来适配不同屏幕尺寸。

1. 安装依赖

在 pubspec.yaml 中添加：

dependencies:
  flutter_screen_util: ^5.9.0
  responsive_framework: ^1.4.2

2. 基本配置

flutter_screen_util（基于屏幕尺寸缩放）：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690), // 设计稿尺寸
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (_, child) {
        return MaterialApp(
          home: child,
        );
      },
      child: const HomePage(),
    );
  }
}

responsive_framework（基于断点响应）：

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) => ResponsiveWrapper.builder(
        ClampingScrollWrapper.builder(context, child!),
        breakpoints: const [
          ResponsiveBreakpoint.resize(350, name: MOBILE),
          ResponsiveBreakpoint.autoScale(600, name: TABLET),
          ResponsiveBreakpoint.resize(800, name: DESKTOP),
        ],
      ),
      home: const HomePage(),
    );
  }
}

3. 结合使用示例

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

  @override
  Widget build(BuildContext context) {
    // flutter_screen_util 的尺寸适配
    double height = 100.h; // 设计稿高度的100单位
    double width = 200.w;  // 设计稿宽度的200单位
    double fontSize = 16.sp; // 字体适配

    return Scaffold(
      body: ResponsiveRowColumn(
        // responsive_framework 的布局适配
        layout: ResponsiveWrapper.of(context).isMobile 
            ? ResponsiveRowColumnType.COLUMN
            : ResponsiveRowColumnType.ROW,
        children: [
          ResponsiveRowColumnItem(
            child: Container(
              height: height,
              width: width,
              color: Colors.blue,
              child: Text(
                '响应式文本',
                style: TextStyle(fontSize: fontSize),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

4. 使用场景说明

  • flutter_screen_util：适合按设计稿比例精确缩放尺寸，特别是需要保持固定比例的元素。
  • responsive_framework：适合根据屏幕断点调整布局结构（如行列变换）。

5. 注意事项

  • 避免过度使用 .h/.w，优先使用百分比或 Expanded 等弹性布局。
  • 在 responsive_framework 的断点配置中，建议根据实际项目需求调整数值。
  • 测试时注意在不同设备上的显示效果，确保布局协调。

通过这种组合方式，既能实现精细的尺寸控制，又能灵活应对不同屏幕的布局变化。

回到顶部