当前位置: 首页 > news >正文

Flutter 屏幕适配之相对尺寸适配

在Android中我们可以通过脚本来动态生成适配于各个厂商的屏幕的相对尺寸。

那么在Flutter中我们如何通过相同的思路来实现同样的效果呢?我们知道,Android的每个厂商的屏幕大小存在非常大区别。有些长,有的短,有的粗,有的细,这个的确給用户提供了非常多的选择,但是对于开发来说就比较苦恼了。

那么来看看具体该怎么实现吧,其实很简单,首先我们和UI约定,UI图中的设备宽高是多少,在我们这里是宽375,高812。然后如下就是具体的实现代码,使用的方式也很简单,比如说,在UI图中,标记出是1pt的尺寸,我们完全可以通过1.pt的方式来指定其尺寸。

这里定义了两种尺寸,pt和hpt,这两个有什么区别呢?pt表示横向的尺寸,hpt表示纵向的尺寸。

请注意,如果使用这两种尺寸存在一些问题,比如遇到尺寸不是375*812的尺寸的设备那些方块的图形就会被拉伸成长方形。

对于这种情况,我们就需要将图片宽度和高度都设置成pt即可,Android本来就不同于IOS,不可能那么精准地设置每个组件的位置和大小。

import 'dart:ui' as ui;/// 屏幕的宽度
double get deviceWidth =>ui.window.physicalSize.width / ui.window.devicePixelRatio;/// 屏幕的高度
double get deviceHeight =>ui.window.physicalSize.height / ui.window.devicePixelRatio;/// 尺寸扩展,需要确保UI提供的图的高度是372*812(这个根据具体的项目而定),UI要是这么坑就砍死他
const int _physicalWidth = 375;
const int _physicalHeight = 812;extension IntExt on int {///宽度拓展double get pt => deviceWidth / _physicalWidth * this;///高度拓展double get hpt => deviceHeight / _physicalHeight * this;
}
extension DoubleExt on double {///宽度拓展double get pt => deviceWidth / _physicalWidth * this;///高度拓展double get hpt => deviceHeight / _physicalHeight * this;
}

http://www.lryc.cn/news/286804.html

相关文章:

  • 在线预约小程序源码系统:适合任何行业的在线预约,快捷方便,省时省心 带完整的搭建教程
  • AI部署开发指南:用vs2019编译OnnxRuntime-v1.16.2
  • 【强化学习】QAC、A2C、A3C学习笔记
  • android usb2.0 协议基础(2)
  • C语言快速排序(非递归)图文详解
  • Java面试题136-150
  • 使用trace工具分析Mysql如何选择索引
  • 微信小程序(十二)在线图标与字体的获取与引入
  • 分类预测 | Matlab实现LSTM-Attention-Adaboost基于长短期记忆网络融合注意力机制的Adaboost数据分类预测/故障识别
  • java web mvc-04-Apache Wicket
  • 暴力破解常见的服务器
  • 运行Navicat转储的数据库SQL文件失败
  • 动静态库的理解、制作、使用。
  • 【趣味游戏-08】20240123点兵点将点到谁就是谁(列表倒置reverse)
  • cherry键盘alt+tab无法切换窗口的问题解决
  • 「nuxt2配置tailwindcss」nuxt2添加tailwindcss详细步骤!解决版本不对称各种报错~~
  • 1、中级机器学习课程简介
  • Mybtisplus对时间字段进行自动填充
  • [HTML]Web前端开发技术12(HTML5、CSS3、JavaScript )——喵喵画网页
  • 音频特效SDK,满足内容生产的音频处理需求
  • 使用vue2写一个太极图,并且点击旋转
  • 张量计算和操作
  • 【Spring Boot 3】【JPA】枚举类型持久化
  • SVN 常用命令汇总(2024)
  • K8S四层代理Service-02
  • 3、非数值型的分类变量
  • 国内免费chartGPT网站汇总
  • 【Alibaba工具型技术系列】「EasyExcel技术专题」实战研究一下 EasyExcel 如何从指定文件位置进行读取数据
  • java.security.InvalidKeyException: Illegal key size错误
  • python脚本,实现监控系统的各项资源