flutter屏幕适配

Posted 2021-11-08 pythonclub

现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，

比如我们的设计稿一个View的大小是300px，如果直接写300px，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。

安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而flutter本身并没有适配规则，而原生的又比较繁琐，这就需要我们自己去对屏幕进行适配。

点击直达github地址 如果有帮助，请给我个star

flutter_ScreenUtil

flutter 屏幕适配方案

github: github.com/OpenFlutter…

csdn博客 工具 介绍: blog.csdn.net/u011272795/…

使用方法:

安装依赖：

安装之前请查看最新版本

dependencies:
  flutter:
    sdk: flutter
  # 添加依赖
  flutter_screenutil: ^0.3.0
复制代码

在每个使用的地方导入包：

import ‘package:flutter_screenutil/flutter_screenutil.dart‘;

复制代码

初始化设置尺寸

在使用之前请设置好设计稿的宽度和高度，传入设计稿的宽度和高度(单位px) 一定在MaterialApp的home中的页面设置，以保证在每次使用之前设置好了适配尺寸:

//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
复制代码

使用：

适配尺寸：

//传入设计稿的px尺寸：
适配后的宽度width: ScreenUtil().setWidth(540),
适配后的高度height: ScreenUtil().setHeight(200),
高度也根据setWidth来做适配可以保证不变形

例如:
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
            ),
复制代码

适配字体:

ScreenUtil().setSp(28)         //传入字体大小，根据系统的“字体大小”辅助选项来进行缩放
      ScreenUtil().setSp(28，false)  //传入字体大小，不会根据系统的“字体大小”辅助选项来进行缩放

for example:
        Text(
             ‘My font size is 28px and will not change with the system.‘,
                 style: TextStyle(
                   color: Colors.black,
                   fontSize: ScreenUtil().setSp(28, false) 
                 )
             ),

复制代码

其他相关api：

ScreenUtil.pixelRatio       //设备的像素密度
    ScreenUtil.screenWidth      //设备宽度
    ScreenUtil.screenHeight     //设备高度
    ScreenUtil.bottomBarHeight  //底部安全区距离，适用于全面屏下面有按键的
    ScreenUtil.statusBarHeight  //状态栏高度 刘海屏会更高  单位px
    ScreenUtil.textScaleFactory //系统字体缩放比例
    
    ScreenUtil().scaleWidth  //宽度相对于设计稿放大的倍数
    ScreenUtil().scaleHeight //高度相对于设计稿放大的倍数
    
复制代码

//导入
import ‘package:flutter_screenutil/flutter_screenutil.dart‘;

...

  @override
   Widget build(BuildContext context) {
     //设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
     ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
     print(‘设备宽度:${ScreenUtil.screenWidth}‘); //Device width
     print(‘设备高度:${ScreenUtil.screenHeight}‘); //Device height
     print(‘设备的像素密度:${ScreenUtil.pixelRatio}‘); //Device pixel density
     print(
         ‘底部安全区距离:${ScreenUtil.bottomBarHeight}‘); //Bottom safe zone distance，suitable for buttons with full screen
     print(
         ‘状态栏高度:${ScreenUtil.statusBarHeight}px‘); //Status bar height , Notch will be higher Unit px
     print(
         ‘宽度相对于设计稿放大的倍数:${ScreenUtil().scaleWidth}‘); //The width is enlarged relative to the design draft
     print(
         ‘高度相对于设计稿放大的倍数:${ScreenUtil().scaleHeight}‘); //The height is enlarged relative to the design draft
     print(‘系统的字体缩放比例:${ScreenUtil.textScaleFactory}‘);
 
     return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       body: new Center(
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: <Widget>[
             Row(
               children: <Widget>[
                 Container(
                   width: ScreenUtil().setWidth(375),
                   height: ScreenUtil().setHeight(200),
                   color: Colors.red,
                   child: Text(
                     ‘My width:${ScreenUtil().setWidth(375)}dp‘,
                     style: TextStyle(
                         color: Colors.white,
                         fontSize: ScreenUtil().setSp(28, false)),
                   ),
                 ),
                 Container(
                   width: ScreenUtil().setWidth(375),
                   height: ScreenUtil().setHeight(200),
                   color: Colors.blue,
                   child: Text(‘My width:${ScreenUtil().setWidth(375)}dp‘,
                       style: TextStyle(
                           color: Colors.white,
                           fontSize: ScreenUtil().setSp(28, false))),
                 ),
               ],
             ),
             Text(‘Device width：${ScreenUtil.screenWidth}px‘),
             Text(‘Device height:${ScreenUtil.screenHeight}px‘),
             Text(‘Device pixel density:${ScreenUtil.pixelRatio}‘),
             Text(‘Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px‘),
             Text(‘Status bar height:${ScreenUtil.statusBarHeight}px‘),
             Text(
               ‘Width is enlarged relative to the design draft:${ScreenUtil().scaleWidth}‘,
               textAlign: TextAlign.center,
             ),
             Text(
               ‘Height is enlarged relative to the design draft:${ScreenUtil().scaleHeight}‘,
               textAlign: TextAlign.center,
             ),
             SizedBox(
               height: ScreenUtil().setHeight(200),
             ),
             Text(‘System font scaling:${ScreenUtil.textScaleFactory}‘),
             Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: <Widget>[
                 Text(
                     ‘我的文字大小是28px，不会随着系统的文字大小变化‘,
                     style: TextStyle(
                         color: Colors.black,
                         fontSize: ScreenUtil().setSp(28, false))),
                 Text(‘我的文字大小是28px，会随着系统的文字大小变化‘,
                     style: TextStyle(
                         color: Colors.black, fontSize: ScreenUtil().setSp(28))),
               ],
             )
           ],
         ),
       ),
     );
   }
复制代码

使用示例:

example demo

效果:

适配原理

说一下适配方案, 比如我们设计师设计的UI是根据Iphone6来做的,我们知道 iPhone6的分辨率是750*1334(px), 又或者是根据hdpi的设备来设计的UI,我们知道hdpi的 Android 设备是 (240 dpi),像素密度是1.5,即hdpi设备的分辨率宽度是320px, 总之,无论设计稿的单位是px,或者是dp,我们都能够转换成px. 那么我们如果根据px来适配,ios和 android 就都可以兼容了.

假设,我们的设计稿手机是1080 1920 px. 设计稿上有一个540 960 的组件, 即宽度和宽度是手机的一半. 如果我们直接写的时候组件的尺寸这么定义,在其他尺寸的设备上未必是一半,或多,或少. 但是我们可以按比例来看,即我们要实现的宽度是实际设备的一半. 那么假设我们设备的宽度是deviceWidth和deviceHeight , 我们要写的组件大小为: 宽:(540/1080)*deviceWidth,高度: (960/1920)*deviceHeight.

通过这个公式我们可以发现,我们要写的组件宽度就是设计稿上的尺寸width*(deviceWdith/原型设备宽度).那么每次我们写ui的时候,只要直接哪来设计稿的尺寸*(deviceWdith/设备原型)宽度即可.

原理就是先获取,实际设备与原型设备的尺寸比例. 首先flutter获取设备的尺寸的代码是:

以下数据为我的手机数据:

import ‘dart:ui‘;
//因为window是dart:ui中提供的,所以需要引入这个包.
window.physicalSize  //Size(1080.0, 1794.0)  单位px
width =  window.physicalSize.width  //宽度
height =  window.physicalSize.height  //高度

//使用这个方法则无需引入包
MediaQuery.of(context).size   //Size(411.4, 683.4)   单位:dp
widhtDp = MediaQuery.of(context).size.width   //宽度 411.4
heightDp = MediaQuery.of(context).size.height  //高度 683.4
复制代码

设计稿单位是px,且尺寸为1080*1920 px 时:

scaleWidth = width  / 1080;
scaleHeight = height / 1920;
复制代码

那么我们要写尺寸为500 100控件的宽度就是 500 scaleWidth .100*scaleHeigh ,注意这时单位是px,flutter中默认组件尺寸单位都是dp,我们还要进行px->dp的操作.除以像素密度就好了. flutter获取像素密度的方法:

MediaQuery.of(context).devicePixelRatio
window.physicalSize     
复制代码

上面两种方法得到的是一样的结果,但是window对象来自dart:ui,所以我们引入这个包:

import ‘dart:ui‘;

设计稿单位是dp,且尺寸为360*640 dp 时:

scaleWidth = widhtDp / 360;
scaleHeight = heightDp / 640;
那么我们要写尺寸为500*100控件的宽度就是 500*scaleWidth .100*scaleHeigh 
复制代码

字体大小适配

setSp(int fontSize, [allowFontScaling = true]) => allowFontScaling
      ? setWidth(fontSize) * _textScaleFactor
      : setWidth(fontSize);
复制代码

第一个参数为设计稿中字体的大小，单位px， 第二个参数可选，为控制字体是否要根据系统的“字体大小”辅助选项来进行缩放。默认值为true。