阅读 117

Flutter 手机屏幕字体适配新控件sizer

最近开发中发现一个新的控件plugin:sizer,对于适配手机和平板屏幕和字体有很达帮助,废话不多说,直接上图。

**未使用此控件:请看下图 **

image.png

**使用此控件适配后,请看下图 **

image.png

大家可以看到适配后做到了屏幕和字体的适配,如果做到的呢?

1. 下载:

pubspec.yaml 文件里加入

dependencies:
  ...
  sizer: ^2.0.15
复制代码

2. 控件都有哪些参数:

  • .h - 返回屏幕高的百分比 例如 .20h 就是屏幕高度的百分之二十.
  • .w - 返回屏幕高的百分比 例如 .20w 就是屏幕宽度的百分之二十.
  • .sp - 根据屏幕的大小获取 对应设备所显示的字体大小适配不同手机屏幕显示字体的大小
  • SizerUtil.orientation -获取屏幕的横屏还是竖屏
  • SizerUtil.deviceType - 获取当前设备是手机还是电脑

3. 如何使用

  1. 首先在 .dart 文件中引入

import 'package:sizer/sizer.dart';

  1. 使用 Sizer 包裹 MaterialApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Sizer(
      builder: (context, orientation, deviceType) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Sizer',
          theme: ThemeData.light(),
          home: HomeScreen() ,
        );
      },
    );
  }
}
复制代码
  1. 在任何页面想要使用sizer 还是要先导入 (暂时还不支持自动导入)

import 'package:sizer/sizer.dart';

  1. 一些例子
Container(
      width: 20.w,    //取屏幕宽的百分之20
      height:30.h     //取屏幕高的百分之30
    )
复制代码
/// Padding 横项 - 屏幕高的百分之3 和 竖项 - 屏幕高的百分之5
Padding(
      padding: EdgeInsets.symmetric(vertical: 5.h, horizontal: 3.h),
      child: Container(),
    );
复制代码
 /// 根据手机屏幕的大小 15.sp 会生成手机所需要的尺寸字体
 Text(
      'Sizer',style: TextStyle(fontSize: 15.sp),
    );
复制代码
print("使用sizer值并且在手机上打印数据:");
print(20.h);
print(10.w);
print(10.sp);

I/flutter (13030): 获取结果:荣耀9i
I/flutter (13030): 143.33333333333331
I/flutter (13030): 36.0
I/flutter (13030): 12.0

复制代码

个人觉得很实用,如果你也感兴趣,请尝试一下。

官方网址:

pub.dev/packages/si…

努力💪 干就完了哈哈

文章分类
前端
文章标签