Flutter中的flutter_screenutil的详细使用

flutter_screenutil 是一个适配屏幕尺寸和屏幕密度的 Flutter 插件。它可以帮助开发者确保 Flutter 应用在不同屏幕尺寸和分辨率的设备上都能保持合理的布局和尺寸。当开发跨多种设备（如不同尺寸的智能手机和平板电脑）的 Flutter 应用时，flutter_screenutil 尤其有用。

flutter_screenutil 的作用：

1. 尺寸适配： 允许你根据设计稿的尺寸来设置元素的宽度、高度、字体大小等，插件会自动根据当前设备屏幕的尺寸进行适配。
2. 屏幕密度适配： 自动适配不同的屏幕密度，提供更加清晰的字体和图像。

在你的代码中使用前，需要先进行初始化：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690), // 设置设计稿的尺寸
      builder: () => MaterialApp(
        title: 'Flutter ScreenUtil Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

然后，在你的 UI 代码中，使用 ScreenUtil 类提供的方法设置尺寸和字体大小：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化ScreenUtil
    ScreenUtil.init(context,
        designSize: Size(360, 690), allowFontScaling: false);

    return Scaffold(
      appBar: AppBar(
        title: Text(
          'ScreenUtil Demo',
          style: TextStyle(
            fontSize: 20.sp, // 使用 '.sp' 来设置字体大小
          ),
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'This is a text',
              style: TextStyle(
                fontSize: 24.sp, // 为文字大小使用 'sp'
              ),
            ),
            SizedBox(height: 12.h), // 在高度上使用 '.h'
            Container(
              width: 180.w, // 在宽度上使用 '.w'
              height: 200.h, // 在高度上使用 '.h'
              color: Colors.blue,
              child: Text(
                'This box will adapt to the screen width!',
                style: TextStyle(fontSize: 16.sp),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的代码示例中：

• ScreenUtil.init 方法设置了设计稿尺寸（设计时指定的屏幕尺寸）。这应该是你一开始就调用的，以便 ScreenUtil 可以使用这些信息进行适配。
• sp 单位用来确保文字大小在不同设备上看起来相同。它会考虑设备的文字缩放设置。
• w、h 单位用来按设计稿的尺寸进行宽度和高度的适配。

使用 flutter_screenutil 插件时需要注意的是，使用它设置的尺寸是在运行时计算的，它们会根据实际设备屏幕的尺寸和密度与设计稿之间的比例进行调整。但并不是所有的 UI 元素都需要使用 flutter_screenutil 进行适配，有时候简单的 flex 布局或者媒体查询(MediaQuery)可能就足够了。适配屏幕大小主要是为了保持布局在不同大小和分辨率的设备上的一致性。例如，对于较为复杂的布局或是具体的定制化设计，使用 flutter_screenutil 可以确保元素的大小更加精确地反映设计师的意图。

使用建议：

• 设计稿尺寸 ：在使用 ScreenUtilInit 初始化时设置的设计尺寸应该是 UI 设计师提供的原始设计稿的尺寸（通常以像素为单位）。这将确保在不同屏幕上的尺寸比例根据设计稿来适配。
• 布局时使用 ：布局构建时使用 .w、.h 做宽高适配，.sp 做不随系统字体缩放变化的字体大小适配。这样可以最大限度确保在不同屏幕尺寸的设备上，UI 组件保持相同的视觉比例。
• 测试不同设备 ：即使使用了 flutter_screenutil，也应该在各种屏幕尺寸和分辨率的设备上测试你的应用，确保布局看起来正确并且美观。
• 不是银弹 ：虽然 flutter_screenutil 在处理尺寸适配方面很方便，但它并不适用于所有的布局场景。例如，某些响应式布局可能更适合使用媒体查询 (MediaQuery) 或者 Flex 相关的 widgets。

最后，请记住，在定义布局时仍应遵循好的布局实践，如合理使用间距、边距、对齐等，并结合 flutter_screenutil 以达到跨设备一致的用户体验。

关怀模式：字体大小动态设置

要实现这样一个"关怀模式"功能，即在用户启动这个模式时将应用内所有字体放大1.5倍，你可以通过结合使用 flutter_screenutil 和一些应用级状态管理方案来实现。

以下是一个基本的实现步骤：

1. 定义关怀模式状态 : 你可以用如 Provider、Riverpod、Bloc、StateNotifier 或其他任何状态管理解决方案来跟踪关怀模式的状态。
2. 应用全局字体缩放 : 一旦关怀模式被启用，你需要在用户偏好中存储该模式的状态（例如，可以存储在 SharedPreferences 中），然后通过 flutter_screenutil 的字体大小乘以放大系数（这里是1.5）。
3. 根据状态更新UI: 使用一个控制字体大小的函数，这个函数可以在关怀模式打开时返回放大的字体大小。

以下是一个实现的代码示例：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 初始化 flutter_screenutil
    return ScreenUtilInit(
      designSize: Size(360, 690),
      builder: () => MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  double _scaleFactor = 1.0; // 默认的缩放比例为 1.0

  void _toggleCareMode() {
    setState(() {
      // 切换关怀模式的缩放比例
      _scaleFactor = _scaleFactor == 1.0 ? 1.5 : 1.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    // 调用 ScreenUtil.ensureScreenSize 校正尺寸
    ScreenUtil.ensureScreenSize();

// 使用辅助函数来计算字体大小
    double _getScaledFontSize(double fontSize) {
      return fontSize * _scaleFactor;
    }

    return Scaffold(
      appBar: AppBar(
        title: Text(
          '关怀模式示例',
          style: TextStyle(
            fontSize: _getScaledFontSize(20.sp), // 调用辅助函数来设置字体大小
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.visibility),
            onPressed: _toggleCareMode, // 切换字体大小
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 20.h),
          Text(
            '这是普通文本',
            style: TextStyle(
              fontSize: _getScaledFontSize(15.sp), // 根据_scaleFactor调整字体大小
            ),
          ),
          SizedBox(height: 20.h),
          Text(
            '关怀模式文本',
            style: TextStyle(
              fontSize: _getScaledFontSize(24.sp), // 根据_scaleFactor调整字体大小
            ),
          ),
          // ... 其他部件
        ],
      ),
    );
  }
}

在此示例中，我们定义了一个 _scaleFactor 状态变量来跟踪是否应该放大字体。当用户点击 AppBar 上的眼睛图标时，_toggleCareMode 方法会被调用，它会切换 _scaleFactor 的值在 1.0（默认大小）和 1.5（放大大小）之间。_getScaledFontSize 辅助函数负责根据 _scaleFactor 来调整字体大小的值。

为了确保字体大小在整个应用中统一，你需要在设置所有文本的样式时调用 _getScaledFontSize 方法。这样，用户打开关怀模式时，应用中的所有文本大小都会增加到1.5倍。

请注意，这个示例是对当前页面字体的放大。如果你想要在整个应用范围内实现关怀模式，你可能需要将 _scaleFactor 存放在更高层级的状态管理中，例如使用 Provider 或者其他全局状态管理解决方案。然后在应用的各个角落通过读取这个状态来调整字体大小。

这里是一个使用 Provider 包装应用并通过全局状态来管理 _scaleFactor 的示例：

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CareModeProvider(),
      child: MyApp(),
    ),
  );
}

class CareModeProvider with ChangeNotifier {
  double _scaleFactor = 1.0;

  double get scaleFactor => _scaleFactor;

  void toggleCareMode() {
    _scaleFactor = _scaleFactor == 1.0 ? 1.5 : 1.0;
    notifyListeners(); // 通知所有侦听器重新构建
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: Size(360, 690),
      builder: () => MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var careModeProvider = Provider.of<CareModeProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(
          '关怀模式示例',
          style: TextStyle(
            // 使用 Provider 来获取 scaleFactor
            fontSize: 20.sp * careModeProvider.scaleFactor,
          ),
        ),
        actions: [
          IconButton(
            icon: Icon(Icons.visibility),
            onPressed: () {
              // 切换关怀模式
              careModeProvider.toggleCareMode();
            },
          ),
        ],
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 20.h),
          Text(
            '这是普通文本',
            style: TextStyle(
              // 根据 scaleFactor 调整字体大小
              fontSize: 15.sp * careModeProvider.scaleFactor,
            ),
          ),
          SizedBox(height: 20.h),
          Text(
            '关怀模式文本',
            style: TextStyle(
              // 根据 scaleFactor 调整字体大小
              fontSize: 24.sp * careModeProvider.scaleFactor,
            ),
          ),
          // ... 其他部件
        ],
      ),
    );
  }
}

在这个更新后的示例中，我们用 Provider 包装了整个应用，在 ChangeNotifierProvider 中创建了一个 CareModeProvider 实例。这个 CareModeProvider 类包含 _scaleFactor 并对外提供了 toggleCareMode 方法来切换关怀模式。

在 UI 中，我们可以通过 Provider.of<CareModeProvider>(context) 来获取当前的 CareModeProvider 实例，并使用其中的 scaleFactor 来在构建文本样式时动态缩放字体大小。

注意，我们在 AppBar 上使用了一个 IconButton，当用户点击这个按钮时，它会调用 toggleCareMode 方法去切换关怀模式，并通过 notifyListeners 方法通知所有的监听者，即所有使用 Provider.of<CareModeProvider>(context) 的部件都会被重建，以应用新的字体缩放比例。

这样，你就可以在全局范围内控制应用的关怀模式，实现字体放大的功能，从而改善视力不佳用户的阅读体验。