Flutter另一种屏幕适配思路

前言

对应用来说比较好的选择，对图片，布局做大小适配，而文本不做大小适配，尽可能保证大屏设备的优势，能尽可能多的展示更多信息。

好用是好用，但是在一些特殊场景比如平板的应用场景，折叠屏的应用场景，频繁横竖屏切换的场景，我们该如何适配？

这里还是引入一个实际开发的场景，指引页面。如何进行横竖屏切换的适配，以及使用约束布局是否有什么不同的应用。

一、不适配的效果

比如我们适配，那么图片在大屏幕和小屏幕都是展示相同的大小。

如图：

我们以华为的小屏手机与三星的大屏手机为例，可以看出图片大小是一直的，但是三星比较符合设计图，而华为的小票手机就太大了。

二、等比缩放的效果

按照缩放的适配原则，我们先设置设计稿与像素比。

工具类参考 Flutter_screenutil 自己实现的，大致内容和方法都差不多，应该能理解。

void setDesignWHD(double? w, double? h, {double? density = 3.0}) {
  _designW = w ?? _designW;
  _designH = h ?? _designH;
  _designD = density ?? _designD;
}

class ScreenUtil {
  double _screenWidth = 0.0;
  double _screenHeight = 0.0;
  double _screenDensity = 0.0;
  double _statusBarHeight = 0.0;
  double _bottomBarHeight = 0.0;
  double _appBarHeight = 0.0;
  MediaQueryData? _mediaQueryData;

  static final ScreenUtil _singleton = ScreenUtil();

  static ScreenUtil getInstance() {
    _singleton._init();
    return _singleton;
  }

  _init() {
    MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
    if (_mediaQueryData != mediaQuery) {
      _mediaQueryData = mediaQuery;
      _screenWidth = mediaQuery.size.width;
      _screenHeight = mediaQuery.size.height;
      _screenDensity = mediaQuery.devicePixelRatio;
      _statusBarHeight = mediaQuery.padding.top;
      _bottomBarHeight = mediaQuery.padding.bottom;
      _appBarHeight = kToolbarHeight;
    }
  }

  /// 屏幕 宽
  double get screenWidth => _screenWidth;

  /// 屏幕 高
  double get screenHeight => _screenHeight;

  /// appBar 高
  double get appBarHeight => _appBarHeight;

  /// 屏幕 像素密度
  double get screenDensity => _screenDensity;

  /// 状态栏高度
  double get statusBarHeight => _statusBarHeight;

  double get bottomBarHeight => _bottomBarHeight;

  MediaQueryData? get mediaQueryData => _mediaQueryData;

  /// 当前屏幕 宽
  static double getScreenW(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.size.width;
  }

  /// screen height
  /// 当前屏幕 高
  static double getScreenH(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.size.height;
  }

  /// 当前屏幕 像素密度
  static double getScreenDensity(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.devicePixelRatio;
  }

  /// 当前状态栏高度
  static double getStatusBarH(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.padding.top;
  }

  /// 当前BottomBar高度
  static double getBottomBarH(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery.padding.bottom;
  }

  /// 当前MediaQueryData
  static MediaQueryData getMediaQueryData(BuildContext context) {
    MediaQueryData mediaQuery = MediaQuery.of(context);
    return mediaQuery;
  }


  /// 兼容横/纵屏。
  /// 获取适配后的尺寸，兼容横/纵屏切换，可用于宽，高，字体尺寸适配。
  double getAdapterSize(double dp) {
    if (_screenWidth == 0 || _screenHeight == 0) return dp;
    return getRatio() * dp;
  }

  /// 适配比率。
  double getRatio() {
    return (_screenWidth > _screenHeight ? _screenHeight : _screenWidth) /
        _designW;
  }

  /// 兼容横/纵屏。
  /// 获取适配后的尺寸，兼容横/纵屏切换，适应宽，高，字体尺寸。
  static double getAdapterSizeCtx(BuildContext context, double dp) {
    Size size = MediaQuery.of(context).size;
    if (size == Size.zero) return dp;
    return getRatioCtx(context) * dp;
  }

  /// 适配比率。
  static double getRatioCtx(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return (size.width > size.height ? size.height : size.width) / _designW;
  }
}

使用：

setDesignWHD(375, 667, density: mRatio);

   final width = imgAssetWidth ?? 278;
   final height = imgAssetHeight ?? 278;
   final adapterWidth =  ScreenUtil.getInstance().getAdapterSize(width);
   final adapterHeight =  ScreenUtil.getInstance().getAdapterSize(height);
   Log.d('width:$width adapterWidth:$adapterWidth height:$height adapterHeight:$adapterHeight');

我们把原始的宽高和适配后的宽高打印出来：

它适配后可以感觉图片明显变小了，看Log:

而三星的基本没有变化：

这也是是 Flutter 开发的主流的适配方案。对图片和容器做大小的适配。也可以对不想做适配的布局不做适配。

三、约束布局的效果

如果我们对大屏设备，或者可变屏设备（折叠屏）做适配呢？

其实不太好搞，如果是小屏就会显得正常，而展开的大屏上就会显得图片还是太小。此时我想到 Android 的约束布局很适合这个场景，而 Flutter 的 GDE 也开源了一个 Flutter 的约束布局【传送门】

那么使用 Flutter 的约束布局能不能进行适配呢？怎么写？

以今日头条的适配方案【传送门】，我们以宽度为纬度进行适配，我们应该以宽度的百分比进行高度的设置，然后以父布局高度的百分比进行位置的移动，是不是很有Android 开发的感觉...

    MyAssetImage(
        imgAssetPath ?? Assets.homeGuideCenterImg1,
        ).applyConstraint(
        width: matchConstraint,
        height: matchConstraint,
        //宽度matchConstraint，根据屏幕宽度百分比来
        widthPercent: ConfigService.to.isFullScreenDevice ? 0.72 : 0.65,
        //开启宽高比
        ratioBaseOnWidth: true,
        //高度matchConstraint，根据宽高比来
        widthHeightRatio: (imgAssetWidth ?? 278) / (imgAssetHeight ?? 343),
        left: parent.left,
        right: parent.right,
        top: rId(2).bottom,
        bottom: parent.bottom,
    )

那么同样的也可以做到大屏幕与小屏幕的适配，做到小屏幕的显示图片大小会更小。

华为小屏：

三星大屏：

四、横屏怎么适配？

如果用约束布局做适配，横屏就会比较丑，这样的：

我们可以用线性布局来做，然后包裹滚动布局，也可以给约束布局设置宽高为横屏的宽高，这样也能做在横屏时候显示出竖屏的效果：

首先我们先对横竖屏做出监听，然后在切换横竖屏返回不同的布局即可：

代码如下：

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (BuildContext context, Orientation orientation) {
        if (orientation == Orientation.portrait) {
          // 竖屏
          return _buildPageLayout(true);
        } else {
          // 横屏
          return ScrollConfiguration(
            behavior: NoShadowScrollBehavior(),
            child: SingleChildScrollView(
              child: _buildPageLayout(false),
            ),
          );
        }
      },
    );
  }

我们就能横竖屏分别展示布局或包裹滚动的布局，并且横竖屏的时候对图片的适配做不同的方案，对横屏的图片需要固定宽高，可以选择是适配后的宽高。

  Widget _buildPageLayout(bool isScreenV) {
    final width = imgAssetWidth ?? 278;
    final height = imgAssetHeight ?? 278;
    final adapterWidth = ScreenUtil.getInstance().getAdapterSize(width);
    final adapterHeight = ScreenUtil.getInstance().getAdapterSize(height);
    return ConstraintLayout(
      width: ConfigService.to.width ?? matchParent,
      height: ConfigService.to.height ?? matchParent,
      children: [
        //主标题
        MyTextView(
          title ?? '',
          isFontBold: true,
          textColor: ColorConstants.black,
          fontSize: 24,
        ).applyConstraint(
          left: parent.left,
          right: parent.right,
          top: parent.top,
          bottom: parent.bottom,
          verticalBias: ConfigService.to.isFullScreenDevice ? 0.15 : 0.1,
        ),
        //副标题1
        MyTextView(
          subTitle1 ?? '',
          isFontMedium: true,
          textColor: ColorConstants.black,
          fontSize: 14,
        ).applyConstraint(
          left: parent.left,
          right: parent.right,
          top: rId(0).bottom.margin(14),
        ),
        //副标题2
        MyTextView(
          subTitle2 ?? '',
          isFontMedium: true,
          textColor: ColorConstants.black,
          fontSize: 14,
        ).applyConstraint(
          left: parent.left,
          right: parent.right,
          top: rId(1).bottom,
        ),

        //中间主图片展示,三元表达式横竖屏布局不同
        isScreenV
            ? MyAssetImage(
                imgAssetPath ?? Assets.homeGuideCenterImg1,
              ).applyConstraint(
                width: matchConstraint,
                height: matchConstraint,
                //宽度matchConstraint，根据屏幕宽度百分比来
                widthPercent: ConfigService.to.isFullScreenDevice ? 0.72 : 0.65,
                //开启宽高比
                ratioBaseOnWidth: true,
                //高度matchConstraint，根据宽高比来
                widthHeightRatio: (imgAssetWidth ?? 278) / (imgAssetHeight ?? 343),
                left: parent.left,
                right: parent.right,
                top: rId(2).bottom,
                bottom: parent.bottom,
              )
            : MyAssetImage(
                imgAssetPath ?? Assets.homeGuideCenterImg1,
                width: adapterWidth,  //横屏展示适配后的宽高
                height: adapterHeight,  //横屏展示适配后的宽高
              ).applyConstraint(
                left: parent.left,
                right: parent.right,
                top: rId(2).bottom,
                bottom: parent.bottom,
              ),
      ],
    );
  }

华为小屏：

三星大屏：（不是说三星的图片比较小的，是差不多大的，只是三星手机太大了，横过来截屏的图片缩了）

当然横屏是滚动的布局，可以上下滚动。当然最好的办法横屏还是自己重新写 Colum ，我就是懒。

后记

所以我们可以灵活的选择多种多样的适配方案，尺寸缩放，全局配置生效，局部配置不生效，约束布局的方案等等。

关于约束布局的适配也不失为一种新的方案，其实不用约束布局使用原生的百分比布局，比例布局，根据宽高设置间距等类似的 API 也能实现同样的效果哦。

本文的效果展示代码都已经展示出来，有兴趣的可以复制代码进行测试，都是比较简单的工具代码。

关于后续我也会持续分享一些实际开发中 Flutter 的踩坑与其他实现方案思路，有兴趣可以关注一下。

如果感觉本文对你有一点点点的启发，还望你能点赞支持一下,你的支持是我最大的动力啦。

Ok,这一期就此完结。