sizer

Sizer 帮助您轻松创建响应式 UI。

一个 Flutter 插件，用于轻松使 Flutter 应用响应式。自动适应不同屏幕尺寸的 UI。响应式变得简单。

Alt Text

Alt Text

内容

现有用户

各位现有用户，我已经更新了该包以支持 Flutter 2.0 并修复了许多错误，当您将 1.x.x 更新到 2.x.x 时会遇到许多错误，因此请使用下面的新代码更新该包。

安装 ⬇️

添加到 pubspec.yaml。

dependencies:
  ...
  sizer: ^2.0.14

参数 ⚙️

  • .h – 返回基于设备的计算高度
  • .w – 返回基于设备的计算宽度
  • .sp – 返回基于设备的计算 sp
  • SizerUtil.orientation – 用于屏幕方向纵向或横向
  • SizerUtil.deviceType – 用于设备类型手机或平板电脑

用法 ?

将以下导入添加到您的 Dart 代码中

import 'package:sizer/sizer.dart';

用 ResponsiveSizer widget 包裹 MaterialApp

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

每当您使用高度和宽度时，请先导入 sizer 包。

import 'package:sizer/sizer.dart';

小部件尺寸 ?

    Container(
      width: 20.w,    //It will take a 20% of screen width
      height:30.h     //It will take a 30% of screen height
    )

填充 ⏹

    Padding(
      padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
      child: Container(),
    );

字体大小 ?

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

方形小部件 ?

如果您想制作方形大小的小部件，则在高度和宽度中都提供高度或宽度。

    Container(
            width: 30.h,      //It will take a 30% of screen height
            height: 30.h,     //It will take a 30% of screen height
    );

方向 ?

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

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

设备类型 ?

如果您希望在平板电脑和手机上呈现相同的布局，请使用 SizerUtil.deviceType 方法

SizerUtil.deviceType == DeviceType.mobile
  ? Container(   // Widget for Mobile
      width: 100.w,
      height: 20.5.h,
   )
  : Container(   // Widget for Tablet
      width: 100.w,
      height: 12.5.h,
   )

建议

方向

如果您想同时支持纵向和横向，请为两者创建单独的小部件，如方向示例。

设备类型

如果您想同时支持手机和平板电脑，请为两者创建单独的小部件，如设备类型示例。

注意

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

VSCode 和 Android Studio 中的自动导入对于 Dart 扩展方法不起作用。键入 10.h 不会提供此包的自动导入建议

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

import 'package:sizer/sizer.dart';

问题和反馈 ?

如果您有关于包含功能的任何建议，或者有任何不适用的情况，请随时在 Github 上打开一个 issue 以便我们进行讨论。

GitHub

https://github.com/TechnoUrmish/Sizer