第九节 Flutter 屏幕适配

在开发过程中,屏幕适配是很重要的一件事.
再RN中我们可以获取屏幕的像素,按照特定机型来适配屏幕大小.
还要自己手写类来计算,flutter省去了这些问题.
屏幕适配的插件可以让我们很快就入手.
下面介绍一款flutter 屏幕适配插件,使用过感觉很不错.
放出GitHub 地址

请你检查最新的版本然后做以下操作
pubspec.yaml 文件下

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  flutter_screenutil: ^0.5.3

如何使用:
先要导入包

import 'package:flutter_screenutil/flutter_screenutil.dart';
//ScreenUtil.screenWidth  获取屏幕宽度
//ScreenUtil.screenHeight 获取屏幕高度
//ScreenUtil.pixelRatio 获取像素
 @override
  Widget build(BuildContext context) {
    ScreenUtil.instance = ScreenUtil(width: 750,height: 1334)..init(context);
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body:Container(
        width: ScreenUtil.getInstance().setWidth(750),
        child: HomeSwiper(),
      )
    ));
  }

///每个逻辑像素的字体像素数，字体的缩放比例
  static double get textScaleFactory => _textScaleFactor;

  ///设备的像素密度
  static double get pixelRatio => _pixelRatio;

  ///当前设备宽度 dp
  static double get screenWidthDp => _screenWidth;

  ///当前设备高度 dp
  static double get screenHeightDp => _screenHeight;

  ///当前设备宽度 px
  static double get screenWidth => _screenWidth * _pixelRatio;

  ///当前设备高度 px
  static double get screenHeight => _screenHeight * _pixelRatio;

  ///状态栏高度 dp 刘海屏会更高
  static double get statusBarHeight => _statusBarHeight;

  ///底部安全区距离 dp
  static double get bottomBarHeight => _bottomBarHeight;

  ///实际的dp与设计稿px的比例
  get scaleWidth => _screenWidth / instance.width;

  get scaleHeight => _screenHeight / instance.height;

  ///根据设计稿的设备宽度适配
  ///高度也根据这个来做适配可以保证不变形
  setWidth(double width) => width * scaleWidth;

  /// 根据设计稿的设备高度适配
  /// 当发现设计稿中的一屏显示的与当前样式效果不符合时,
  /// 或者形状有差异时,高度适配建议使用此方法
  /// 高度适配主要针对想根据设计稿的一屏展示一样的效果
  setHeight(double height) => height * scaleHeight;

  ///字体大小适配方法
  ///@param fontSize 传入设计稿上字体的px ,
  ///@param allowFontScaling 控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为false。
  ///@param allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
  setSp(double fontSize) => allowFontScaling
      ? setWidth(fontSize)
      : setWidth(fontSize) / _textScaleFactor;

最后编辑于：2019.07.04 18:10:20