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

比如我们的设计稿一个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。

flutter屏幕适配的更多相关文章

  1. Flutter 移动端屏幕适配方案和制作

    flutter_screenutil插件 flutter 屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局! 注意:此插件仍处于开发阶段,某些API可能尚未推出. 安装依赖: 安装之前请查 ...

  2. Flutter移动电商实战 --(11)首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  3. 11-Flutter移动电商实战-首页_屏幕适配方案和制作

    1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理的布局. 插件会让你先设置一个UI稿的尺寸,他会根据这个尺寸 ...

  4. Flutter实战视频-移动电商-11.首页_屏幕适配方案讲解

    11.首页_屏幕适配方案讲解 国人写的屏幕适配插件: https://github.com/OpenFlutter/flutter_screenutil 最新版本是0.5.1 在pubspec.yam ...

  5. 01-02 Flutter仿京东商城项目 功能分析、底部导航Tab切换以及路由配置、架构搭建:(Flutter仿京东商城项目 首页布局以及不同终端屏幕适配方案)

    Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目 功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目 首页布局以及不同 ...

  6. Android屏幕适配笔记

    1.限定符 为了适配不同屏幕大小的android手机或android平板,有时候就需要利用限定符来为不同的屏幕设定不同的布局文件,在一般情况下我们都是在layout文件夹下为某个活动准备一个默认的布局 ...

  7. iOS开发点滴:iPhone屏幕适配

    最近开始做iOS开发,遇到一些小问题和解决方法,记录下.   今天是iPhone屏幕适配 iPhone5出来之后屏幕就有iPhone就有了2种尺寸:3.5寸和4寸,xcode 5 的IB设计器里面界面 ...

  8. IOS开发之绝对布局和相对布局(屏幕适配)

    之前如果做过Web前端页面的小伙伴们,看到绝对定位和相对定位并不陌生,并且使用起来也挺方便.在IOS的UI设计中也有绝对定位和相对定位,和我们的web前端的绝对定位和相对定位有所不同但又有相似之处.下 ...

  9. JavaScript强化教程 —— Cocos2d-JS的屏幕适配方案

    1. 设置屏幕适配策略(Resolution Policy) 如果你还没有用过Resolution Policy,只需要在游戏载入过程完成之后(cc.game.onStart函数回调中),调用下面的代 ...

随机推荐

  1. windows通过node环境搭建安装npm,cnpm,vue-cli

    1首先下载node,官网地址:https://nodejs.org/en/ 左边是稳定版,右边是最新版,安装过程一样,我选择的是稳定版. 按照步骤一步一步的安装就行,注意路径就可以了. 友情链接:ht ...

  2. bootstrap-table 分页

    bootstrap-table   <!DOCTYPE html> <head> <meta charset="UTF-8"/> <tit ...

  3. 字符编码ASCII,Unicode 和 UTF-8

    一直对编码的概念很模糊,今天抽空突然想了解下,就找到了这个文章,看完真的豁然开朗,必须感谢阮一峰先生. 一.ASCII 码 我们知道,计算机内部,所有信息最终都是一个二进制值.每一个二进制位(bit) ...

  4. UVA1374-Power Calculus(迭代加深搜索)

    Problem UVA1374-Power Calculus Accept:323  Submit:2083 Time Limit: 3000 mSec  Problem Description  I ...

  5. ORACLE SPA

    注:转自http://blog.csdn.net/wish503/article/details/52066944 ------------------------------------------ ...

  6. 在flask中使用swagger(flasgger使用方法及效果展示)

    一. 部分代码及效果 from flask import Flask from flasgger import Swagger import config app = Flask(__name__) ...

  7. Android测试(二):Android测试基础

    原文地址:https://developer.android.com/training/testing/fundamentals.html 用户在不同的级别上与你的应用产生交互.从按下按钮到将信息下载 ...

  8. JDK命令行(jps、jstat、jinfo、jmap、jhat、jstack、jstatd、hprof)与JConsole

    很多资料在介绍JDK命令行工具时并不是在Java8环境下,因此还在使用过时的永久区系列的参数,给一些读者造成困难. Java8使用Metaspace(元空间)代替永久区,对于64位平台,为了压缩JVM ...

  9. 详解JSOUP的Select选择器语法

    本文参考:JSOUP中文文档 问题 你想使用类似于CSS或jQuery的语法来查找和操作元素. 方法 可以使用Element.select(String selector) 和 Elements.se ...

  10. 安卓权限申请处理框架Android-UsesPermission

    安卓权限申请封装处理框架.测试支持4.0+.项目源于正式处理Android权限问题时,没找到简单.能满足被拒绝权限自动会到系统设置处理的框架,按自己的编程习惯造一个熟悉的轮子还是蛮好的.第一次使用An ...