Flutter 库推荐 Sizer 可帮助您轻松创建响应式 UI

作者：坚果

2022 年 6 月 12 日
本文字数：1206 字
阅读完需：约 4 分钟

sizer

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

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

安装⬇️

添加到 pubspec.yaml。

dependencies:  ...  sizer: ^2.0.15

复制代码

参数⚙️

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

用法💻

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

import 'package:sizer/sizer.dart';

复制代码

用 ResponsiveSizer 小部件包装 MaterialApp

Sizer(      builder: (context, orientation, deviceType) {        return MaterialApp(          debugShowCheckedModeBanner: false,          title: 'Sizer',          theme: ThemeData.light(),          home: homePage(),        );      },    )

复制代码

每当您使用高度和宽度时，首先导入 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,   )

复制代码

建议

方向

如果您想同时支持纵向和横向，请为两个类似方向示例制作单独的小部件。

设备类型

如果您想同时支持移动设备和平板电脑，请为两者制作单独的小部件，例如 deviceType 示例。

注意

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

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

一种解决方法是键入Device以便显示自动导入建议：

import 'package:sizer/sizer.dart';

复制代码

这也是一个很不错的包，希望大家喜欢。

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/217070e4d7e6590df3a8fb0d9】。文章转载请联系作者。

坚果

关注

此间若无火炬，我便是唯一的光 2020.10.25 加入

公众号：“大前端之旅”，华为云享专家，InfoQ签约作者，51CTO博客首席体验官，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

发布

暂无评论

创作场景

Flutter 库推荐 Sizer 可帮助您轻松创建响应式 UI

sizer

安装⬇️

参数⚙️

用法💻

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

用 ResponsiveSizer 小部件包装 MaterialApp

小部件大小🕓

填充⏹

字体大小🆎

方形小部件🟩

方向🔄

设备类型📱

建议

注意

坚果

评论