Flutter ScreenUtil 包的使用详解和注意点

31 min read

Flutter ScreenUtil 是一个用于在不同屏幕上自适应布局的 Flutter 插件。它可以帮助开发者根据屏幕的宽度和高度自动调整组件的大小、间距和字体大小。

使用 ScreenUtil 需要在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_screenutil: ^1.0.2

下载依赖后，在代码中引入并初始化 ScreenUtil：

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) {
    // 初始化 ScreenUtil
    ScreenUtil.init(
      BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height,
      ),
    );
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 在布局中使用 ScreenUtil
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ScreenUtil Demo'),
      ),
      body: Center(
        child: Container(
          width: ScreenUtil().setWidth(200),  // 设置宽度为 200px
          height: ScreenUtil().setHeight(100), // 设置高度为 100px
          color: Colors.red,
          child: Text(
            'Hello',
            style: TextStyle(
              fontSize: ScreenUtil().setSp(20), // 设置字体大小为 20px
            ),
          ),
        ),
      ),
    );
  }
}

上述代码中，通过 ScreenUtil.init() 方法来初始化 ScreenUtil，并传入一个 BoxConstraints 实例，该实例定义了布局的最大宽度和最大高度。在布局中使用 ScreenUtil().setWidth()、ScreenUtil().setHeight() 和 ScreenUtil().setSp() 方法来设置组件的大小和字体大小。

在使用 ScreenUtil 时需要注意以下几点：

  1. 初始化：在主函数（main）中或者根部件的 build 方法中调用 ScreenUtil.init() 来初始化 ScreenUtil，以确保在计算布局时能够正确地使用屏幕尺寸。

  2. 使用宽高和字体大小设置方法：在设置宽高和字体大小时，使用 ScreenUtil().setWidth()、ScreenUtil().setHeight() 和 ScreenUtil().setSp() 来计算相应的大小值。

  3. 布局前先初始化：在每个布局部件的 build 方法中，先初始化 ScreenUtil 以确保使用正确的屏幕尺寸。

  4. 适配字体大小：使用 ScreenUtil().setSp() 方法来适配字体大小，该方法会根据屏幕的尺寸和文字比例进行计算，从而在不同屏幕上显示相同的字体大小。

总之，Flutter ScreenUtil 包提供了一种简洁、灵活的方法来自适应布局，开发者可以根据屏幕尺寸来调整组件的大小、间距和字体大小，以适应不同的屏幕。