05_Flutter屏幕适配

05_Flutter屏幕适配

一.屏幕适配方案

通过指定基准屏宽度，进行适配，基准屏宽度取决于设计图的基准宽度，以iphone 14 pro max为例，

devicePixelRatio = 物理宽度 / 逻辑宽度(基准宽度)

iphone 14 pro max的物理尺寸宽度为1290，基准屏尺寸375，也就是逻辑尺寸，因此可以得到像素比devicePixelRatio为3.44。

也就是说1个逻辑像素 = 3.4个物理像素。这样就把多样化的物理尺寸宽度都统一成了375的逻辑像素。搭建界面的时候以375的逻辑宽度去搭建即可。

二.确定新的逻辑尺寸和像素比

竖屏状态下，Flutter默认的逻辑像素的计算规则是：

逻辑宽度 = 物理宽度 / 像素比

Flutter默认的像素比使用的是像素密度，就是我们平时常说的一倍屏、二倍屏、三倍屏。三倍屏的像素密度是3.0…

因此，我们需要修改默认的逻辑尺寸，将逻辑宽度统一成375。首先确定新的像素比devicePixelRatio。

新的像素比 = 物理宽度 / 375

从而确定新的逻辑尺寸为:

新的逻辑尺寸 = 默认的逻辑尺寸 / 新的像素比
三.默认的逻辑尺寸和像素比的确定过程

那么接下来的问题就是怎么将Flutter默认的逻辑尺寸和像素比修改为新的逻辑尺寸和像素比了，查看源码可以知道，runApp时首先会示例化一个WidgetsFlutterBinding的单例对象。

void runApp(Widget app) {final WidgetsBinding binding = WidgetsFlutterBinding.ensureInitialized();assert(binding.debugCheckZone('runApp'));binding..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))..scheduleWarmUpFrame();
}

也就是通过WidgetsFlutterBinding.ensureInitialized()来实例话这个静态单例。后续我们可以通过WidgetsBinding.instance拿到这个对象:

class WidgetsFlutterBinding extends BindingBase with GestureBinding, SchedulerBinding, ServicesBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {static WidgetsBinding ensureInitialized() {if (WidgetsBinding._instance == null) {WidgetsFlutterBinding();}return WidgetsBinding.instance;}
}

而WidgetsFlutterBinding是继承了BindingBase的，因此WidgetsFlutterBinding示例化的同时，会调用BindingBase的构造方法，接着看BindingBase的构造方法:

BindingBase() {...initInstances();...
}

BindingBase的构造方法中，会调用initInstances()，initInstances()调用的同时，会调用RendererBinding的initInstances()方法，接着看RendererBinding的initInstances方法:

@override
void initInstances() {super.initInstances();...initRenderView();...
}

RendererBinding的initInstances方法中，会调用initRenderView方法，接着看RendererBinding的initRenderView方法:

void initRenderView() {...renderView = RenderView(configuration: createViewConfiguration(), view: platformDispatcher.implicitView!);...
}

RendererBinding的initRenderView方法会创建一个RenderView对象，同时RendererBinding为renderView提供了set方法，这就意味着我们可以在外部重新设置renderView的值，创建RenderView的时候会传入ViewConfiguration，和一个FlutterView对象，通过这个FlutterView对象，我们可以获取到设备的物理尺寸以及像素密度，以Android为例，这个FlutterView对象就对应着Acrivity的DecorView。接着看createViewConfiguration方法:

ViewConfiguration createViewConfiguration() {final FlutterView view = platformDispatcher.implicitView!;final double devicePixelRatio = view.devicePixelRatio;return ViewConfiguration(size: view.physicalSize / devicePixelRatio,devicePixelRatio: devicePixelRatio,);
}

可以看到，ViewConfiguration对象的创建过程，会传递默认的像素比，以及确定默认的逻辑尺寸，这里就是我们第一个需要修改的地方，那么怎么修改，毫无疑问，需要把RendererBinding的renderView的值替换成我们自己创建的，这样我们就可以根据自己计算的逻辑尺寸和像素比去创建ViewConfiguration了。

四.MediaQuery的确定过程

回到runApp的源码:

void runApp(Widget app) {...binding..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))...
}

WidgetsFlutterBinding示例化完成后，会通过WidgetsFlutterBinding的wrapWithDefaultView方法包装MaterialApp。接着看WidgetsFlutterBinding的wrapWithDefaultView方法:

Widget wrapWithDefaultView(Widget rootWidget) {return View(view: platformDispatcher.implicitView!,child: rootWidget,);
}

可以看到，这里使用了View包装MaterialApp，那么接着看View的build方法:

@override
Widget build(BuildContext context) {return _ViewScope(view: view,child: MediaQuery.fromView(view: view,child: child,),);
}

MediaQuery的build过程:

@override
Widget build(BuildContext context) {MediaQueryData effectiveData = _data!;if (!kReleaseMode && _parentData == null && effectiveData.platformBrightness != debugBrightnessOverride) {effectiveData = effectiveData.copyWith(platformBrightness: debugBrightnessOverride);}return MediaQuery(data: effectiveData,child: widget.child,);
}

看到这里，就可以知道，可以通过在MaterialApp外部包裹一个MediaQuery组件，同时传入新的逻辑尺寸和像素比。这是第二个需要修改的地方。

五.修改默认的逻辑尺寸和像素比

这里就直接上代码了:

class ScreenAdapterBinding extends StatelessWidget {final double baseScreenWidth;final Widget child;const ScreenAdapterBinding({super.key,this.baseScreenWidth = 375,required this.child});@overrideWidget build(BuildContext context) {return _ScreenAdapterScope(baseScreenWidth: baseScreenWidth,view: View.of(context),child: child,);}}class _ScreenAdapterScope extends StatefulWidget {final double baseScreenWidth;final FlutterView view;final Widget child;const _ScreenAdapterScope({this.baseScreenWidth = 375,required this.view,required this.child,});@overrideState<StatefulWidget> createState() => _ScreenAdapterScopeState();}class _ScreenAdapterScopeState extends State<_ScreenAdapterScope> with WidgetsBindingObserver {MediaQueryData? _parentData;MediaQueryData? _data;get _devicePixelRatio {final FlutterView view = widget.view;//物理尺寸final Size physicalSize = view.physicalSize;//新的像素密度double baseWidth = widget.baseScreenWidth;double targetPixelRatio = physicalSize.width / baseWidth;if(targetPixelRatio == null || targetPixelRatio <= 0) {targetPixelRatio = view.devicePixelRatio;}return targetPixelRatio;}Size get _size {final FlutterView view = widget.view;return view.physicalSize / _devicePixelRatio;}void _updateParentData() {_parentData = MediaQuery.maybeOf(context);_data = null; // _updateData must be called again after changing parent data.}void _updateData() {WidgetsBinding.instance.renderView.configuration = ViewConfiguration(size: _size,devicePixelRatio: _devicePixelRatio);final MediaQueryData newData = MediaQueryData.fromView(widget.view, platformData: _parentData).copyWith(size: _size,devicePixelRatio: _devicePixelRatio,);if (newData != _data) {setState(() {_data = newData;});}}@overridevoid initState() {super.initState();WidgetsBinding.instance.addObserver(this);}@overridevoid didChangeDependencies() {super.didChangeDependencies();_updateParentData();_updateData();assert(_data != null);}@overridevoid didUpdateWidget(_ScreenAdapterScope oldWidget) {super.didUpdateWidget(oldWidget);if (_data == null || oldWidget.view != widget.view) {_updateParentData();_updateData();}assert(_data != null);}@overridevoid didChangeAccessibilityFeatures() {if (_parentData == null) {_updateData();}}@overridevoid didChangeMetrics() {_updateData();}@overridevoid didChangeTextScaleFactor() {if (_parentData == null) {_updateData();}}@overridevoid didChangePlatformBrightness() {if (_parentData == null) {_updateData();}}@overridevoid dispose() {WidgetsBinding.instance.removeObserver(this);super.dispose();}@overrideWidget build(BuildContext context) {MediaQueryData effectiveData = _data!;if (!kReleaseMode && _parentData == null && effectiveData.platformBrightness != debugBrightnessOverride) {effectiveData = effectiveData.copyWith(platformBrightness: debugBrightnessOverride);}return MediaQuery(data: effectiveData,child: widget.child,);}}

使用的时候，只需要将MaterialApp使用ScreenAdapterBinding包裹即可:

class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return ScreenAdapterBinding(baseScreenWidth: 375,child:MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: const MyHomePage(title: 'Flutter Demo Home Page'),));}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key, required this.title});final String title;@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Container(alignment: Alignment.center,color: Colors.white,child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(width: 375,height: 100,color: Colors.red,),Container(width: 370,height: 100,color: Colors.red,margin: const EdgeInsets.only(top: 20),)],),),//floatingActionButton: FloatingActionButton(onPressed: () {},child: const Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}
}

在这里插入图片描述

可以看到第一个Container，宽度为375，刚好能够铺满屏幕，第二个Container，宽度为370，没有铺满屏幕，说明默认的逻辑尺寸和像素比已经被修改为了我们自己确定的结果。但是有个问题，那就是点击事件失效了。

六.修复点击事件

这里就不绕弯了，首先看GestureBinding的initInstances方法

@override
void initInstances() {...platformDispatcher.onPointerDataPacket = _handlePointerDataPacket;
}

接着看GestureBinding的_handlePointerDataPacket方法:

void _handlePointerDataPacket(ui.PointerDataPacket packet) {// We convert pointer data to logical pixels so that e.g. the touch slop can be// defined in a device-independent manner.try {_pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, platformDispatcher.implicitView!.devicePixelRatio));if (!locked) {_flushPointerEventQueue();}} catch (error, stack) {FlutterError.reportError(FlutterErrorDetails(exception: error,stack: stack,library: 'gestures library',context: ErrorDescription('while handling a pointer data packet'),));}}

可以看到，这里在计算点击的触摸坐标时，还使用的是默认的像素比去计算的，因此，这里需要把默认的像素密度替换。直接上代码:

class _ScreenAdapterScopeState extends State<_ScreenAdapterScope> with WidgetsBindingObserver {...final Queue<PointerEvent> _pendingPointerEvents = Queue<PointerEvent>();void _handlePointerDataPacket(PointerDataPacket packet) {try {_pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, _devicePixelRatio));if (!WidgetsBinding.instance.locked) {_flushPointerEventQueue();}} catch (error, stack) {FlutterError.reportError(FlutterErrorDetails(exception: error,stack: stack,library: 'gestures library',context: ErrorDescription('while handling a pointer data packet'),));}}void _flushPointerEventQueue() {assert(!WidgetsBinding.instance.locked);while (_pendingPointerEvents.isNotEmpty) {WidgetsBinding.instance.handlePointerEvent(_pendingPointerEvents.removeFirst());}}void _updateParentData() {_parentData = MediaQuery.maybeOf(context);_data = null; // _updateData must be called again after changing parent data.}void _updateData() {WidgetsBinding.instance.renderView.configuration = ViewConfiguration(size: _size,devicePixelRatio: _devicePixelRatio);final MediaQueryData newData = MediaQueryData.fromView(widget.view, platformData: _parentData).copyWith(size: _size,devicePixelRatio: _devicePixelRatio,);WidgetsBinding.instance.platformDispatcher.onPointerDataPacket = _handlePointerDataPacket;if (newData != _data) {setState(() {_data = newData;});}}...}

在这里插入图片描述

完美搞定。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于SSM的购物小程序01

基于SSM的购物小程序01

4.1系统架构设计 购物系统设计的系统项目的概述设计分析&#xff0c;主要内容有学习平台的具体分析&#xff0c;进行数据库的是设计&#xff0c;数据采用mysql数据库&#xff0c;并且对于系统的设计采用比较人性化的操作设计&#xff0c;对于系统出现的错误信息可以及时做出处…
阅读更多...
【Linux系统】地址空间 Linux内核进程调度队列

【Linux系统】地址空间 Linux内核进程调度队列

1.进程的地址空间 1.1 直接写代码&#xff0c;看现象 1 #include<stdio.h>2 #include<unistd.h>3 4 int g_val 100;5 6 int main()7 {8 int cnt 0;9 pid_t id fork();10 if(id 0)11 {12 while(1)13 {14 printf(&…
阅读更多...
如何用flutter写一个好的登录页面

如何用flutter写一个好的登录页面

编写一个好的登录页面是构建用户友好且安全的移动应用的重要一步。下面是使用Flutter编写一个好的登录页面的一些建议和步骤&#xff1a; 1. 设计用户界面 1.简洁明了的布局&#xff1a;确保界面简洁明了&#xff0c;不要过分复杂&#xff0c;避免用户感到困惑。 2.清晰的输入框…
阅读更多...
SQL刷题---2021年11月每天新用户的次日留存率

SQL刷题---2021年11月每天新用户的次日留存率

解题思路&#xff1a; 1.首先算出每个新用户注册的日期,将其命名为表a select uid,min(date(in_time)) dt from tb_user_log group by uid2.计算出每个用户登录的天数,将其命名为表b select uid,date(in_time) dt from tb_user_log union select uid,date(out_time) dt fro…
阅读更多...
校园小情书微信小程序源码/社区小程序前后端开源/校园表白墙交友小程序

校园小情书微信小程序源码/社区小程序前后端开源/校园表白墙交友小程序

校园小情书前端代码&#xff0c;好玩的表白墙、树洞、校园论坛&#xff0c;可独立部署&#xff0c;也可以使用我部署的后台服务&#xff0c;毕业设计的好项目。 搭建教程&#xff1a; 一、注册管理后台 1、登录小情书站点进行注册&#xff1a;https://你的域名 2、注册成功…
阅读更多...
使用Docker搭建一主二从的redis集群

使用Docker搭建一主二从的redis集群

文章目录 一、根据基础镜像构建三个docker容器二、构建master机三、配置slave机四、测试 本文使用 主机指代 物理机、 master机指代“一主二从”中的 一主&#xff0c; slave机指代“一主二从”中的 二从 一、根据基础镜像构建三个docker容器 根据本文第一章&#xff08…
阅读更多...
小红书笔记写作方法和技巧分享，纯干货！

小红书笔记写作方法和技巧分享，纯干货！

很多小伙伴感叹小红书笔记流量就是一个玄学&#xff0c;有时精心撰写的笔记却没有人看&#xff0c;自己随便写的笔记却轻轻松松上热门。实际上你还是欠点火候&#xff0c;小红书笔记写作是有一套方法和技巧的&#xff0c;总归是有套路的&#xff0c;如果你不知道&#xff0c;请…
阅读更多...
YOLOv5检测框crop、MobileNetv3分类网络

YOLOv5检测框crop、MobileNetv3分类网络

在实际深度学习项目中&#xff0c;目标检测算法检测出的目标也会作为分类网络的输入数据&#xff0c;利用目标检测算法的对被检测图像进行抠图&#xff0c;以抠出来的图来扩充分类网络的数据。本文主要讲解yolov5和mobilenetv3结合使用扩展数据样本。 目录 1、yolov5检测框cro…
阅读更多...
CTFHub（web sql注入）（二）

CTFHub（web sql注入）（二）

布尔盲注 盲注原理&#xff1a; 将自己的注入语句使用and与?id1并列&#xff0c;完成注入 手工注入&#xff1a; 爆库名长度 首先通过折半查找的方法&#xff0c;通过界面的回显结果找出数据库名字的长度&#xff0c;并通过相同的方法依次找到数据库名字的每个字符、列名…
阅读更多...
EasyExcel追加写入数据，分批查询多次写入场景下，注意使用方式【OOM警告】

EasyExcel追加写入数据，分批查询多次写入场景下，注意使用方式【OOM警告】

使用.withTemplate(file) 将临时数据文件和真实数据文件合并的方式&#xff0c;在生产环境大批量数据下&#xff0c;完全不可取&#xff0c;有很高的内存溢出风险 伪代码 public static void writeAppend(String fileName) {String filePath "tempDir".concat(Fil…
阅读更多...
Docker操作容器打包（commit），压缩（save），挂载（load）

Docker操作容器打包（commit），压缩（save），挂载（load）

文章目录 前言一、容器打包二、将镜像压缩成tar包三、将tar包挂载为镜像结束 前言 将容器打包成镜像时&#xff0c;你正在将应用程序及其所有依赖项、文件和配置文件捆绑到一个可移植的、独立的单元中。这样做可以确保您的应用程序在不同环境中具有一致的运行方式&#xff0c;…
阅读更多...
密码学 | 椭圆曲线密码学 ECC 入门（三）

密码学 | 椭圆曲线密码学 ECC 入门（三）

目录 7 这一切意味着什么&#xff1f; 8 椭圆曲线密码学的应用 9 椭圆曲线密码学的缺点 10 展望未来 ⚠️ 原文地址&#xff1a;A (Relatively Easy To Understand) Primer on Elliptic Curve Cryptography ⚠️ 写在前面&#xff1a;本文属搬运博客&#xff0c;自己留…
阅读更多...
C语言——结构体详解

C语言——结构体详解

今天我们就一起来了解一下C语言中结构体有关的知识吧&#xff01; 结构是什么&#xff1f; 结构是一些值的集合&#xff0c;这些值被称为成员变量&#xff0c;结构的每个成员可以是不同类型的变量。 我们之前也学习过数组&#xff0c;这里我们来区分一下结构体和数组的…
阅读更多...
ELK+Kafka+Zookeeper日志收集系统

ELK+Kafka+Zookeeper日志收集系统

环境准备 节点IP节点规划主机名192.168.112.3Elasticsearch Kibana Logstash Zookeeper Kafka Nginxelk-node1192.168.112.3Elasticsearch Logstash Zookeeper Kafkaelk-node2192.168.112.3Elasticsearch Logstash Zookeeper Kafka Nginxelk-node3 基础环境 sys…
阅读更多...
存储过程的使用(一）

存储过程的使用(一）

目录 不带参数的存储过程 创建一个存储过程&#xff0c;向数据表 dept 中插入一条记录 带 IN 参数的存储过程 在存储过程中接受来自外部的数值&#xff0c;在存储过程中判断该数值是否大于零并显示 输入一个编号&#xff0c;查询数据表emp中是否有这个编号&#xff0c;如果…
阅读更多...
Ubuntu日常配置

Ubuntu日常配置

目录 修改网络配置 xshell连不上怎么办 解析域名失败 永久修改DNS方法 临时修改DNS方法 修改网络配置 1、先ifconfig确认本机IP地址&#xff08;刚装的机子没有ifconfig&#xff0c;先apt install net-tools&#xff09; 2、22.04版本的ubuntu网络配置在netplan目录下&…
阅读更多...
全面讲解基于大型语言模型的智能Agent：发展历程、架构与基于Langchain的实现demo

全面讲解基于大型语言模型的智能Agent：发展历程、架构与基于Langchain的实现demo

在大型语言模型&#xff08;LLM&#xff09;的时代&#xff0c;基于大型语言模型的智能Agen在过去一年中取得了显著进展。 本文主要介绍基于大型语言模型的智能Agent&#xff0c;目录如下&#xff1a; Agent技术的起源。人工智能Agent技术的发展历程。基于LLM的Agent架构。基…
阅读更多...
重构国内游戏账号登录系统的思考和实践

重构国内游戏账号登录系统的思考和实践

本期作者 背景 账号登录系统&#xff0c;作为游戏发行平台最重要的应用之一&#xff0c;在当前的发行平台的应用架构中&#xff0c;主要承载的是用户的账号注册、登录、实名、防沉迷、隐私合规、风控等职责。合规作为企业经营的生命线&#xff0c;同时&#xff0c;账号登录作为…
阅读更多...
python爬虫之爬取携程景点评价（5）

python爬虫之爬取携程景点评价（5）

一、景点部分评价爬取 【携程攻略】携程旅游攻略,自助游,自驾游,出游,自由行攻略指南 (ctrip.com) import requests from bs4 import BeautifulSoupif __name__ __main__:url https://m.ctrip.com/webapp/you/commentWeb/commentList?seo0&businessId22176&busines…
阅读更多...
视觉slam14讲-大纲-持续更新

视觉slam14讲-大纲-持续更新

视觉slam入门太难 数学理论编程知识计算机视觉知识 缺一不可&#xff0c;大家一起加油
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023