Flutter屏幕适配与尺寸管理插件flutter_sizer的使用

Flutter Sizer 是一个用于实现响应式布局的工具，它提供了辅助小部件和扩展方法来帮助开发者根据设备的不同调整UI元素的大小。本文将详细介绍如何安装、配置以及使用该插件，并提供完整的示例代码。

目录

• 安装
• 参数
• 注意事项
• 社区支持

安装

首先，在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_sizer: ^1.0.4

然后执行flutter pub get命令以下载并安装插件。

参数

以下是flutter_sizer提供的主要参数及其功能：

• Adaptive.h() - 根据设备返回计算后的高度。
• Adaptive.w() - 根据设备返回计算后的宽度。
• Adaptive.dp() - 根据设备返回计算后的dp单位（已取代.sp）。
• .h, .w, .dp - 分别对应上述方法的简写形式。
• Device.boxConstraints - 返回设备的BoxConstraints信息。
• Device.orientation - 返回屏幕方向（横屏或竖屏）。
• Device.screenType - 返回屏幕类型（手机或平板）。
• Device.devicePixelRatio - 返回设备像素比，默认为1.0。

使用说明

导入包

确保在Dart文件顶部正确导入了flutter_sizer库：

import 'package:flutter_sizer/flutter_sizer.dart';

包裹MaterialApp

为了使整个应用程序都能使用flutter_sizer的功能，你需要用FlutterSizer包裹你的MaterialApp：

FlutterSizer(
  builder: (context, orientation, screenType) {
    return MaterialApp();
  }
)

设置Widget大小

你可以通过调用.w() 和 .h() 方法轻松地根据屏幕比例设置容器的宽高：

Container(
  width: Adaptive.w(20), // 占屏幕宽度的20%
  height: 30.5.h         // 占屏幕高度的30.5%
)

设置字体大小

同样地，你也可以利用.dp()来创建自适应的文本样式：

Text(
  'Flutter Sizer',
  style: TextStyle(fontSize: 15.dp),
)

处理不同方向

如果需要根据屏幕方向调整界面布局，可以检查Device.orientation属性：

Device.orientation == Orientation.portrait
  ? Container(
      width: 100.w,
      height: 20.5.h,
   )
  : Container(
      width: 100.w,
      height: 12.5.h,
   )

针对不同设备类型

对于想要区分移动设备和平板电脑的设计，可以借助Device.screenType进行判断：

Device.screenType == ScreenType.tablet
  ? Container(
      width: 100.w,
      height: 20.5.h,
   )
  : Container(
      width: 100.w,
      height: 12.5.h,
   )

注意事项

由于VSCode和Android Studio中的自动导入功能不支持Dart扩展方法，因此当你尝试使用类似10.h这样的语法时，可能不会出现自动提示。此时可以通过先输入Device关键字触发正确的自动导入建议。

社区支持

如果你有任何疑问或者发现了问题，请随时前往GitHub Issues提交反馈；同时也欢迎贡献者们提交Pull Request来改进这个项目。

示例Demo

下面是一个完整的demo例子，展示了如何结合以上所有特性创建一个简单的Flutter应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterSizer(
      builder: (context, orientation, screenType) {
        return MaterialApp(
          title: 'Flutter Sizer Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Home(),
        );
      },
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Container(
              height: Adaptive.h(12.5), // or 12.5.h
              width: 50.w, // or Adaptive.w(50)
              color: Colors.black,
            ),
            Text(
              "Resolution is -> ${100.0.w}x${100.0.h}",
            ),
            Text(
              "This text is responsive 12dp -> ${12.0.dp}",
              style: TextStyle(fontSize: 12.0.dp),
            ),
            Text(
              "This text is responsive 24dp -> ${24.0.dp}",
              style: TextStyle(fontSize: 24.0.dp),
            ),
            Device.orientation == Orientation.portrait
                ? Text("My Orientation is Portrait")
                : Text("My Orientation is Landscape"),
            Device.screenType == ScreenType.tablet
                ? Text("My Screen's Type is a Tablet")
                : Text("My Screen's Type is a Phone")
          ],
        ),
      ),
    );
  }
}

通过这段代码，你可以看到如何使用flutter_sizer插件来创建一个能够自动适应各种屏幕尺寸的应用程序。希望这篇文档对你有所帮助！