Flutter ScreenUtil使用指南：屏幕和字体适配专家

Flutter ScreenUtil使用指南：屏幕和字体适配专家

简介

flutter_screenutil 是一个Flutter插件，用于适配不同屏幕尺寸和字体大小，确保您的UI在各种设备上都能合理布局。

主要功能

• 根据设计稿尺寸适配屏幕和字体大小。
• 支持全局和局部适配。
• 提供了一系列便捷的方法来获取适配后的尺寸和字体大小。

使用Flutter ScreenUtil

1. 添加依赖

在Flutter项目的 pubspec.yaml 文件中添加 flutter_screenutil 包的依赖：

dependencies:
  flutter_screenutil: ^最新版本号

然后运行 flutter pub get 来安装包。

2. 导入插件

在你的Dart文件中导入 flutter_screenutil 插件：

import 'package:flutter_screenutil/flutter_screenutil.dart';

3. 初始化ScreenUtil

在应用的入口或MaterialApp的builder中初始化 ScreenUtil，并设置设计稿的尺寸：

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

4. 使用ScreenUtil进行适配

适配屏幕宽高

Container(
  width: ScreenUtil().setWidth(100), // 根据屏幕宽度适配
  height: ScreenUtil().setHeight(20), // 根据屏幕高度适配
)

适配字体大小

Text(
  'Hello, ScreenUtil',
  style: TextStyle(fontSize: ScreenUtil().setSp(28)), // 根据字体大小适配
)

5. 启用或禁用适配

可以全局或局部启用/禁用宽高和字体的适配：

ScreenUtilInit(
  enableScaleWH: false, // 禁用宽高适配
  enableScaleText: false, // 禁用字体适配
  // ...
)

6. 适配不同方向的屏幕

ScreenUtil支持横竖屏方向的适配，可以根据不同方向的屏幕尺寸进行适配。

7. 测试Widget

在使用ScreenUtil的widget测试时，确保使用 tester.pumpAndSettle() 来等待动画或变化完成。

testWidgets('Should ensure widgets settle correctly', (WidgetTester tester) async {
  await tester.pumpWidget(
    const MaterialApp(
      home: ScreenUtilInit(
        child: MyApp(),
      ),
    ),
  );
  await tester.pumpAndSettle(); // 等待动画或变化完成
  // 继续进行断言和测试
});

8. 高级配置

ScreenUtil提供了多种配置选项，包括但不限于：

• minTextAdapt：是否根据屏幕宽高的最小值来适配文本。
• splitScreenMode：是否支持分屏模式。
• context：提供BuildContext以获取物理设备数据。
• fontSizeResolver：自定义字体大小的适配逻辑。

结论

flutter_screenutil 是一个强大的工具，用于确保Flutter应用在不同设备上具有一致的布局和字体大小。通过本文的指南，你应该能够了解如何在Flutter项目中使用 flutter_screenutil 插件来实现屏幕和字体的适配。如果在实际使用中遇到问题，可以查阅 flutter_screenutil的官方文档 或访问 GitHub仓库 获取更多帮助。