flutter屏幕适配
现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同,
比如我们的设计稿一个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(
转载于:https://www.cnblogs.com/ckAng/p/10077832.html
flutter屏幕适配相关推荐
- 极其简单的Flutter 屏幕适配
A low-cost Flutter screen adaptation solution(一个极低成本的 Flutter 屏幕适配方案) 一 概述 由于 Flutter 的应用场景很多,不只是 an ...
- flutter 屏幕适配 字体大小适配
前言: 现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到 ...
- flutter 基础之屏幕适配
随着苹果,Google等大厂不断研发新的设备机型,Android和iOS的设备种类越来越繁多了,有普通的屏幕16:9的,也有最近几年出来的全面屏,水滴屏,刘海屏等,Android的全面屏基本上是18: ...
- 11-Flutter移动电商实战-首页_屏幕适配方案和制作
11-Flutter移动电商实战-首页_屏幕适配方案和制作 1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理 ...
- Futter 屏幕适配框架flutter_ScreenUtil 用法
前言 : 各位同学大家好,大家在做app开发的时候都会遇到屏幕适配的问题,安卓里面有dp iOS里面有pt 单位给我们用来处理屏幕适配 除此之外安卓还有 autosize等框架给我们使用 ,iOS也对 ...
- flutter ThemeData的使用 屏幕适配方案rpx px
本篇文章转自我自己的有道云笔记 想看图片去那里 文档:Day 3_30 单独补充 Theme ?.. 链接:http://note.youdao.com/noteshare?id=81a13195fe ...
- flutter rpx屏幕适配方案
rpx是小程序中的适配方案,它将750px作为设计稿,1rpx=屏幕宽度/750,其它所有的单位都使用rpx单位. 不管是什么屏幕,统一分成750份 在iPhone8上: 1rpx = 375/750 ...
- Android 动态创建控件并设置控件的大小之Android屏幕适配攻略(五)
Android 屏幕适配攻略(五)动态创建控件并设置控件的大小 题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息 flutter中网络请求dio使用分析 视频 ...
- 2022金九银十Android大厂面试题来袭,面试字节跳动被问Android屏幕适配方案
前言 我最近在筹备Android面试的相关文章,我发现,Framework是一个十分重要的点,被不少大厂所看重. 如图,这是我们的一个技术交流群里面的对话↓↓↓ 前阵子我写的Android技术文里面, ...
最新文章
- 使用rest_framework写api接口的一些注意事项(axios发送ajax请求)
- 奇迹服务器维护,奇迹MU 3月31日服务器维护更新公告
- beamer插入图片_beamer中暗背景插入图片
- 牛客网【每日一题】5月22日 [CQOI2009]中位数图
- 5 ui自适应窗口_Qt编写地图综合应用5-自适应拉伸
- 错误:未启用当前数据库的SQL Server Service Broker,因此查询通知不受支持。如果希望使用通知,请为此数据库启用 Service Broker。...
- Activiti 工作流会签开发设计思路
- 【设计模式系列】行为型之策略模式
- 【软件相关】Proteus 8入门教程
- Linux gd库安装步骤说明
- 自媒体学习教程 新手怎么开始学习自媒体
- 阻止野猪入境 丹麦在德国边境开始建设边境围栏
- 贷款逾期,征信记录五年之内可以消除?
- iView级联选择器Cascader回显慢的问题
- VB中使用DirectX库的简明教程(3)
- 手把手搭建KVM云平台(详细教学)
- android:launchMode的四种方式
- go语言并发下载电影和视频,根据m3u8索引url下载视频.下载网页中的图片,可以从当前页向下搜索层数.
- C/C++实现上、下三角矩阵的压缩存储
- LINUX压缩和解压和磁盘管理与维护命令
热门文章
- jupyter环境配置及使用
- json爬虫获取列表数据不全,已解决
- Android4.4点击无响应,webview某些超链接点击无响应的问题
- 转载:WMS、TMS、OMS、WCS都是什么?
- Shell脚本和Python查看Nginx并发连接数、进程数和常驻内存占用情况
- Java aio(异步网络IO)初探
- arrays中copyof复制两个数组_Core Java - Arrays
- android5.1禁用通知栏,android-阻止通知栏
- 工作中遇到的问题 二 乱码问题
- Spark--安装和配置遇到的所有问题