flutter 类似rem布局

╰半橙微兮° 2021-07-24 17:51 469阅读 0赞

引入第三方库  
import ‘package:flutter\_screenutil/flutter\_screenutil.dart’;

代码示例:

/// 直接通过`类名称`访问里面的方法，方法为 静态方法
    class ScreenAdaper { 
      static init(context){ 
        /// 设计稿 --- 宽/高
        ScreenUtil.init();
        ScreenUtil.init(width: 750, height: 1334);
        ScreenUtil.init(width: 750, height: 1334, allowFontScaling: true);  //flutter_screenuitl >= 1.2
      }
        static sp(double value){ 
         return ScreenUtil().setSp(value, allowFontScalingSelf: true);  /// 获取 计算后的字体
        }
        static height(double value){ 
         return  ScreenUtil().setHeight(value);  /// 获取 计算后的高度
        }
        static width(double value){ 
         return ScreenUtil().setWidth(value);    /// 获取 计算后的宽度
        }
        static screenHeight(){ 
          return  ScreenUtil.screenHeight;  /// 获取 计算后的屏幕高度
        }
        static screenWidth(){ 
          return  ScreenUtil.screenWidth;  /// 获取 计算后的屏幕高度
        }
    
    }

代码示例:

/// Mianyang Qingmu Software Technology Co., Ltd. 
 /// Copyright (C) 2014-2020 All Rights Reserved. 
 /// Website: http://www.qmrjkj.com 
 /// Author: huanghonghao@qmrjkj.com 
 /// Date: 2020-09-08 
 /// Time: 16:20 
 
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 
 ///屏幕适配方案封装
 class ScreenAdaptUtil { 
 factory ScreenAdaptUtil() => _instance;
 ScreenAdaptUtil._internal();
 static final ScreenAdaptUtil _instance = ScreenAdaptUtil._internal();
 
 ///[width]为设计稿的宽，[height]为设计稿的高，[isAllowFontScaling]为是否允许字体缩放
 static void init(
 BuildContext context, num width, num height, bool isAllowFontScaling) { 
 ScreenUtil.init(context,
 width: width, height: height, allowFontScaling: isAllowFontScaling);
 }
 
 /// 设置宽度
 static num setWidth(num width) { 
 return ScreenUtil().setWidth(width);
 }
 
 /// 设置宽度
 static num setHeight(num height) { 
 return ScreenUtil().setHeight(height);
 }
 
 /// 设置字体尺寸
 static num setFontSize(num fontSize) { 
 return ScreenUtil().setSp(fontSize);
 }
 }

代码示例:

/默认 width : 1080px , height:1920px , allowFontScaling:false
    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    
    //假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334) 
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    
    //设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
    
    根据屏幕宽度适配 width: ScreenUtil.getInstance().setWidth(540),
    
    根据屏幕高度适配 height: ScreenUtil.getInstance().setHeight(200),
    
    也可以使用 ScreenUtil() 替代 ScreenUtil.getInstance(), 例如：ScreenUtil().setHeight(200)
    
    注意