Flutter屏幕适配

news2024/11/24 14:04:07

文章目录

  • 一、Flutter单位
  • 二、设备信息
  • 三、常见适配方案
  • 四、flutter_screenutil

一、Flutter单位

Flutter使用的是类似IOS中的点pt(point)。
iPhone6的尺寸是375x667,分辨率为750x1334。
iPhone6的dpr( devicePixelRatio ) 是2.0。

DPR = 物理像素 / 逻辑像素

二、设备信息

通过MediaQuery获取屏幕上的信息。

// 1. 媒体查询信息
final mediaQuery = MediaQuery.of(context);
// 2. 获取宽度和高度
final screenWidth = mediaQuery .size.width;
final screenHeight = mediaQuery .size.heigth;
// 3. 状态栏信息
final statusBarHeigth = mediaQuery .padding.top;
final bottomHeight =    mediaQuery .padding.bottom;

三、常见适配方案

  1. rem
    rem是给根标签( HTML标签 )设置一个字体大小,其他所有的单位都使用rem单位(相对于根标签)。
    浏览器默认的font-size值为16px。
    可以通过更改根元素的大小,调整所有字体大小。

  2. vw、vh
    vw和vh是将屏幕分成100等分,1个vw相当于是1%的大小。
    基于视图窗口的单位。

    • vmin: 选取vw和vh中最小的那个,在手机竖屏时,1vmin = 1vw
    • vmax: 选取vw和vh中最大的那个,在手机竖屏时,1vmax = 1vh
  3. rpx
    rpx是小程序中适配的方案,将750px作为设计稿, 1rpx = 屏幕宽度/750

安全区域适配
在一些手机中,顶部有刘海、摄像头等,底部有话筒等,这些位置不能填充组件,有被阻挡的风险

全面屏适配

  • 在页面中使用了 Scaffold 的 appBar 和 bottomNavigationBar,Scaffold 框架会自动按照全面屏的机制进行适配 ,不需要开发者进行手动配置。
  • 如果页面中没有使用 Scaffold , 或者使用了 Scaffold没有使用appBar和bottomNavigationBar,这样顶部导航栏偏上,底部导航栏偏下,这里需要适配一下。可以使用 MediaQuery.of(context).padding 获取屏幕四个方向上的 Padding,然后进行适配。

四、flutter_screenutil

使用pub.dev上的第三方插件库flutter_screenutil实现屏幕的适配。
https://pub.dev/packages/flutter_screenutil

flutter_screenutil介绍
[图片]
flutter_screenutil库的功能

  • 屏幕适配:flutter_screenutil可以根据设备的屏幕尺寸和密度,将设计稿上的尺寸转换为适合当前设备的实际尺寸。这样,无论是在小屏幕手机上还是在大屏幕平板电脑上运行应用,UI元素都能正确地适配屏幕。
  • 尺寸适配:flutter_screenutil提供了setWidth()setHeight()方法,通过传入设计稿上的尺寸,可以根据设备的屏幕宽度进行动态调整,返回适配后的实际宽度。
  • 字体适配:flutter_screenutil提供了setSp()方法,可以根据设备的屏幕密度进行字体大小的适配。通过传入设计稿上的字体大小,可以根据当前设备的屏幕密度动态调整字体大小。

flutter_screenutil使用
[图片]

flutter packages get

flutter_screenutil api
[图片]

ScreenUtil.init( context, designSize:const Size(375,667));
ScreenUtil().setWidth(xxx);

常用的api

ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24)      //字体大小适配
// 简写方式
ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

一般情况下1.w != 1.h,除非刚好屏幕分辨率比例与设计图比例一致。如果要设置为正方形,要使用相同的单位( 同为w或者同为h ), 否则可能显示为长方形。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1164660.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

论文 辅助笔记:t2vec train.py

1 train 1.1 加载training和validation数据 def train(args):logging.basicConfig(filenameos.path.join(args.data, "training.log"), levellogging.INFO)设置了日志的基本配置。将日志信息保存到名为 "training.log" 的文件中日志的级别被设置为 INFO&…

Vue动态树、配置请求路径、表格数据显示、实现分页、创建书本管理组件、点击菜单实现路由跳转以及系统首页配置。

目录 1. 准备工作 2. 动态树 2.1 在配置请求路径 2.2 使用动态数据构建导航菜单 2.2.1 通过接口获取数据 2.2.3 通过后台获取的数据构建菜单导航 2.2.3.1 先构建一级导航菜单 2.3 点击菜单实现路由跳转 2.3.1 创建书本管理组件 3. 系统首页配置 4. 表格数据显示 4.…

探密工业互联网网络体系:构建端到端的稳定传输

什么是工业互联网网络? 工业互联网网络是一种将工业设备、传感器和计算机系统连接到一起,以便它们可以共同工作、共享数据和实现更高效的生产和控制。这个网络体系的目标是提高工业过程的效率、可靠性和安全性。 在数字时代的今天,工业互联网…

无广告弹出的便签工具选择哪一款?

广告弹窗,是许多人在日常办公中比较反感的问题,打开一个软件正准备使用时,突然冒出一个广告弹窗,这会给人一种特别反感的情绪,尤其是在专注记录工作任务备忘的时候,意外冒出的广告窗口可真让人心烦。那么&a…

Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片

本心、输入输出、结果 文章目录 Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片前言M3、M3 Pro 和 M3 Max 芯片的性能相关资料图M3 Pro规格M3 Max规格弘扬爱国精神 Apple 苹果发布 M3、M3 Pro 和 M3 Max 芯片 编辑:简简单单 Online zuozuo 地址:https://blog…

若依框架中SpringSecurity的实现流程

文章目录 Spring Security概述核心原理 若依Sprint Security分析配置类分析流程分析图过滤器分析 若依登录/退出流程流程图登录退出 写在开头: 本篇博客与核桃共同完成 Spring Security 概述 Spring Security 是一个功能强大且高度可定制的身份验证和访问控制框架&#xff0c…

go微信开发sdk-简单使用_已设置图床

go微信开发sdk-简单使用 GitHub - silenceper/wechat: WeChat SDK for Go (微信SDK:简单、易用) 使用的sdk为上述的,这边给出快速的项目实例 git clone https://github.com/gowechat/example.git简单的项目结构 这边简单用dock…

多线程锁的升级原理是什么

在 Java 中,锁共有 4 种状态,级别从低到高依次为:无状态锁,偏向锁,轻量级锁和重量级锁状态,这几个状态会随着竞争情况逐渐升级。锁可以升级但不能降级。 多线程锁锁升级过程 如下图所示 多线程锁的升级过程…

数字孪生技术:城市交通的智能引领

城市交通问题一直是我们日常生活中的头等大事。交通拥堵、公共交通不便、环境污染等问题常常困扰着城市居民。然而,数字孪生技术正以令人兴奋的方式改变着城市交通的面貌,为城市交通带来了新的变化。 实时交通监测:数字孪生技术通过网络连接的…

动态规划:“以宇换宙”的优雅工艺

Those who do not remember the past are condemned to repeat it. 那些不能铭记历史的人注定要重蹈覆辙。 在动态规划——经典案例分析中我们提到了斐波那契数列的求解思路。知道动态规划的主要优点是能够在解决问题时避免重复计算,通过利用已经计算过的结果来加速…

Java实现Web的ashx对接ORM

之前的介绍已经实现了ORM的主体和Web的调用结构主题,那么这次把Web和LIS.Core的容器和ORM做对接,通过ashx实现的业务类测试调用ORM查询数据。 首先改造容器让传入根地址 package LIS.Core.Context;import org.w3c.dom.Document; import org.w3c.dom.El…

单例模式-懒汉式双重锁机制

正是因为担心并发问题,才在双重检查锁模式中的synchronized内部进行了再次判断 tnull。 在第一次判断 tnull 之后,当多个线程同时通过这个检查,其中一个线程会获得锁并创建实例。然而,其他线程在此期间可能会继续等待锁释放&…

ViT Vision Transformer超详细解析,网络构建,可视化,数据预处理,全流程实例教程

关于ViT的分析和教程,网上又虚又空的东西比较多,本文通过一个实例,将ViT全解析。 包括三部分内容,网络构建;orchview.draw_graph 将网络每一层的结构与输入输出可视化;数据预处理。附完整代码 网络构建 …

【Code Reading】Transformer in vision and video

文章目录 1. vit2. Swin-t3. vit_3D4. TimeSformer First🚀🚀5. vivit 1. vit 详细解释 在论文的Table1中有给出三个模型(Base/ Large/ Huge)的参数,在源码中除了有Patch Size为16x16的外还有32x32的。其中的Layers就…

基于MIMO通信系统的球形译码算法matlab性能仿真,对比PSK检测,SDR检测

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ................................................................ for i1:length(SNR) Bit…

SpringCloud(六) Nacos配置管理

Nacos除了可以做注册中心,同样可以做配置管理来使用; Nacos做注册中心的使用和注意事项详看:SpringCloud(四) Nacos注册中心-CSDN博客 目录 一, 统一配置管理 1. 在Nacos中添加配置文件 2. 从微服务拉取配置 (1) 引入nacos-config依赖 (2) 添加bootstrap.yaml (3) 读取n…

相机存储卡被格式化了怎么恢复?数据恢复办法分享!

随着时代的发展,相机被越来越多的用户所使用,这也意味着更多的用户面临着相机数据丢失的问题,很多用户在使用相机的过程中,都出现过不小心格式化相机存储卡的情况,里面的数据也将一并消失,相机存储卡被格式…

Android13充电动画实现

充电动画 以MTK平台为例,实现充电动画 效果图 修改文件清单 system/vendor/mediatek/proprietary/packages/apps/SystemUI/src/com/android/systemui/charging/BubbleBean.javasystem/vendor/mediatek/proprietary/packages/apps/SystemUI/src/com/android/system…

2023年【道路运输企业安全生产管理人员】考试资料及道路运输企业安全生产管理人员考试技巧

题库来源:安全生产模拟考试一点通公众号小程序 道路运输企业安全生产管理人员考试资料根据新道路运输企业安全生产管理人员考试大纲要求,安全生产模拟考试一点通将道路运输企业安全生产管理人员模拟考试试题进行汇编,组成一套道路运输企业安…

浅谈新能源汽车充电桩的选型与安装

叶根胜 安科瑞电气股份有限公司 上海嘉定201801 摘要:电动汽车的大力发展和推广是国家为应对日益突出的燃油供需矛盾和环境污染,加强生态环境保护和治理而开发新能源和清洁能源的措施之一,加快了电动汽车的发展。如今,电动汽车已…