flutter 类似rem布局

最新推荐文章于 2024-08-26 08:42:00 发布

神奇大叔

最新推荐文章于 2024-08-26 08:42:00 发布

阅读量455

点赞数

分类专栏： flutter 文章标签： flutter

本文链接：https://blog.csdn.net/weixin_43294560/article/details/108480494

版权

flutter 专栏收录该内容

76 篇文章 6 订阅

订阅专栏

引入第三方库
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. <br>
/// Copyright (C) 2014-2020 All Rights Reserved. <br>
/// Website: http://www.qmrjkj.com <br>
/// Author: huanghonghao@qmrjkj.com <br>
/// Date: 2020-09-08 <br>
/// Time: 16:20 <br>

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)

注意