Responsive Sizer

Responsive Sizer 通过提供辅助小部件和扩展来实现响应式布局。Responsive_sizer 相较于未维护的 sizer 包有许多改进。

  • Sizer 的维护者将此包的整个代码从 ^2.0.1 复制粘贴过来，此后从未维护过该包 : (
  • 自 ^2.0.1 发布以来，responsive_sizer 已经有了许多改进，包括当前的破坏性更改。

img_ss_without_lib

安装

将 responsive_sizer 添加到 pubspec.yaml

dependencies:
  responsive_sizer: 3.0.4+4

破坏性更改

  • 该包现在将使用当前宽度和高度，而不管方向，而不是仅使用纵向模式的宽度和高度。 参见 Issue#6
  • 将 .sp 更改为使用设备像素密度比来计算值，而不是基于设备宽度计算值。

参数

  • Adaptive.h() - 根据设备返回计算出的高度（与 .h 相同）
  • Adaptive.w() - 根据设备返回计算出的宽度（与 .w 相同）
  • Adaptive.sp() - 根据设备返回计算出的 sp（与 .sp 相同）
  • .h - 根据设备返回计算出的高度（与 Adaptive.h 相同）
  • .w - 根据设备返回计算出的宽度（与 Adaptive.w 相同）
  • .sp - 根据设备返回计算出的 sp（与 Adaptive.sp 相同）
  • Device.boxConstraints - 返回设备的 BoxConstraints
  • Device.orientation - 返回屏幕方向（纵向或横向）
  • Device.screenType - 返回屏幕类型（手机或平板电脑）
  • Device.aspectRatio - 返回设备的宽高比
  • Device.pixelRatio - 返回设备的像素密度比

用法

导入包

import 'package:responsive_sizer/responsive_sizer.dart';

使用 ResponsiveSizer 小部件包装 MaterialApp

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

部件大小

Container(
  width: Adaptive.w(20),    // This will take 20% of the screen's width
  height: 30.5.h     // This will take 30.5% of the screen's height
)

字体大小

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

方向

如果您想同时支持纵向和横向方向

Device.orientation == Orientation.portrait
  ? Container(   // Widget for Portrait
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Landscape
      width: 100.w,
      height: 12.5.h,
   )

屏幕类型

如果您希望在平板电脑和手机上看到不同的布局，请使用 Device.screenType 方法。

Device.screenType == ScreenType.tablet
  ? Container(   // Widget for Tablet
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Mobile
      width: 100.w,
      height: 12.5.h,
   )

请注意

您需要导入 responsive_sizer 包才能访问 number.h、number.w 和 number.sp。

VSCode 和 Android Studio 中的自动导入不适用于 dart 扩展方法。键入 10.h 不会为您提供此包的自动导入建议。

一种解决方法是键入 Device，这样自动导入建议就会显示出来。

import 'package:responsive_sizer/responsive_sizer.dart';

GitHub

https://github.com/CoderUni/responsive-sizer