Flutter屏幕适配插件responsive_sizer的使用

Responsive Sizer 插件介绍

Responsive Sizer 是一个帮助实现响应式布局的Flutter插件，它通过提供辅助小部件和扩展来简化不同屏幕尺寸下的UI设计。以下是该插件的主要内容：

• 安装
• 用法
• 参数说明
• 注意事项
• 常见问题解答（FAQ）
• 社区支持

安装

在pubspec.yaml文件中添加依赖项：

dependencies:
  responsive_sizer: ^3.3.1

使用方法

导入包

首先需要导入插件：

import 'package:responsive_sizer/responsive_sizer.dart';

包裹MaterialApp

将你的应用程序根部包裹在ResponsiveSizer内：

ResponsiveSizer(
  builder: (context, orientation, screenType) {
    return MaterialApp(
      home: HomePage(),
    );
  },
);

设置Widget大小

使用Adaptive.w()或.w来根据屏幕宽度百分比设置组件宽度，使用Adaptive.h()或.h根据屏幕高度百分比设置组件高度。

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

设置字体大小

可以使用.dp或者.sp来定义字体大小，以适应不同的屏幕密度。

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

支持多种方向

根据设备的方向显示不同的UI。

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,)

参数说明

• maxMobileWidth: 定义移动设备的最大宽度，默认值为599。
• maxTabletWidth: 定义平板电脑的最大宽度，可选参数；如果设置了此值，则允许区分桌面模式。

注意事项

• 需要手动导入responsive_sizer包才能访问如.h, .w, .dp, .sp等扩展方法。
• 自动导入功能可能无法识别这些扩展方法，建议直接输入完整路径或先引用Device类。

常见问题解答（FAQ）

• .sp与.dp的区别在于它们基于不同的计算方式：.dp基于Material Design标准，而.sp则考虑了设备的像素密度和宽高比。
• 由于无法获取设备的实际物理尺寸，因此.dp并不是严格按照屏幕密度来计算的，而是采用了设备的像素比率作为替代方案。

社区支持

如果您有任何建议或遇到问题，请随时在GitHub Issues上提交反馈；也欢迎贡献代码，创建Pull Request。

示例代码

下面是一个完整的示例应用，演示了如何结合以上提到的功能创建一个响应式的Flutter应用：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveSizer(
      builder: (context, orientation, screenType) {
        return MaterialApp(
          title: 'Responsive Sizer Example',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Home(),
        );
      },
      maxTabletWidth: 900, // 可选参数，用于区分桌面模式
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    late final String screenTypeText;

    switch (Device.screenType) {
      case ScreenType.mobile:
        screenTypeText = "My screen's type is Mobile";
        break;
      case ScreenType.tablet:
        screenTypeText = "My screen's type is Tablet";
        break;
      case ScreenType.desktop:
        screenTypeText = "My screen's type is Desktop";
        break;
    }

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            height: Adaptive.h(12.5), // 或者使用 12.5.h
            width: 50.w,              // 或者使用 Adaptive.w(50)
            color: Colors.black,
          ),
          Text(
            "This text is responsive",
            style: TextStyle(fontSize: 18.sp), // 或者使用 Adaptive.sp(12)
          ),
          Text(
            "w=${100.w} h=${100.h}",
            style: TextStyle(fontSize: 12.sp),
          ),
          Device.orientation == Orientation.portrait
              ? Text("My orientation is Portrait")
              : Text("My orientation is Landscape"),
          Text(screenTypeText),
        ],
      ),
    );
  }
}

这个例子展示了如何创建一个简单的页面，其中包含了响应式的容器、文本以及对不同屏幕类型的检测。希望这能帮助您更好地理解和使用responsive_sizer插件！