Flutter 宽高自适应

2023-11-20

在Flutter开发中也需要宽高自适应,手动写一个工具类,集成之后在像素后面直接使用 px或者 rpx即可。
工具类代码如下:

import 'dart:ui';

class HYSizeFit {
  static double screenWidth = 0.0;
  static double screenHeight = 0.0;

  static double physicalWidth = 0.0;
  static double physicalHeight = 0.0;
  static double dpr = 0.0;
  static double statusHeight = 0.0;

  static double rpx = 0.0;
  static double px = 0.0;

  static void initialize({double standardSize = 750}) {
    // 1、手机的物理分辨率
    physicalWidth = window.physicalSize.width;
    physicalHeight = window.physicalSize.height;

    // 2、 获取dpr
    dpr = window.devicePixelRatio;

    // 3、宽度和高度
    screenWidth = physicalWidth / dpr;
    screenHeight = physicalHeight / dpr;

    // 4、 状态栏高度
    statusHeight = window.padding.top / dpr;

    // 5、计算 rpx 的大小
    rpx = screenWidth / standardSize;
    px = screenWidth / standardSize * 2;
  }

// 按照像素来设置
  static double setPx(double size) {
    return px * size;
  }

// 按照rpx来设置
  static double setRpx(double size) {
    return rpx * size;
  }
}

扩展(extension)代码

import 'hysize.dart';

extension DoubleFit on double {
  double get px {
    return HYSizeFit.setPx(this);
  }

  double get rpx {
    return HYSizeFit.setRpx(this);
  }
}

extension IntFit on int {
  double get px {
    return HYSizeFit.setPx(toDouble());
  }

  double get rpx {
    return HYSizeFit.setRpx(toDouble());
  }
}

开始使用
1、需要在 main中进行初始化

  @override
  Widget build(BuildContext context) {
    // 初始化
    HYSizeFit.initialize();
    return FlutterBoostApp(routeFactory, appBuilder: appBuilder);
  }
}

2、在使用的地方导入扩展文件直接使用即可

Container(
    width: 200.0.px,
    height: 200.px,
)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Flutter 宽高自适应 的相关文章

  • 根据嵌套值使用数组过滤对象数组

    我正在尝试根据某些嵌套对象过滤数组 我准备了一些Fiddle http jsfiddle net NZnN2 249 输入数组如下所示 let arrayOfElements name a subElements surname 1 sur
  • ExtJS 4:克隆商店

    我正在尝试找出如何克隆Ext data Store不保留旧的参考 让我用一些代码更好地解释一下 这是源商店 var source Ext create Ext data Store fields name age data name foo
  • 区分单击与 mousedown/mouseup

    我已经阅读了有关这种情况的 stackoverflow 上的几个答案 但没有一个解决方案有效 我尝试根据用户是否单击某个元素或使用 jQuery 将鼠标按住该元素来执行不同的操作 有可能做到这一点吗 onMouseDown 将在按下左侧或右
  • WebDriver:更改事件未触发

    我有一个使用 KnockoutJS 的应用程序 我正在尝试编写一些测试表单的测试 如果您不了解 KnockoutJS 简单来说 它提供了从我的视图到我的数据模型的绑定 这意味着当我在输入字段中键入值时 我的基础对象会自动使用该输入字段值进行
  • React:React 如何确保在浏览器有机会绘制之后调用 useEffect?

    useLayoutEffect 的文档说 useLayoutEffect 内计划的更新将被刷新 在浏览器有机会绘制之前同步进行 useEffect 的文档说 与 componentDidMount 和 componentDidUpdate
  • 如何在 JavaScript 中构建一个计算数组中出现次数的对象?

    我想计算数组中某个数字出现的频率 例如 在Python中我可以使用Collections Counter创建一个字典 记录某个项目在列表中出现的频率 据我所知 JavaScript 是这样的 var array 1 4 4 5 5 7 va
  • History.replaceState 仍然向“浏览历史记录”添加条目

    具体来说 调用以下代码片段 history replaceState undefined undefined value 正确地不会影响当前页面的后退按钮行为 但是will在 浏览历史记录 页面添加一个条目 这是我不想要的 下图是 Chro
  • 页面点击其他路径后 $timeout 继续运行

    我在用yo angular fullstack生成器来构建我的网站 当用户注册该网站时 它将发送一封带有链接的激活电子邮件 当用户点击该链接时 会显示激活成功并超时进入主页 但是 当超时未结束 用户点击页面中的任何其他链接时 会跳转到其他页
  • 正则表达式 - 避免表达式中出现字符串

    我正在尝试创建一个应该匹配以下情况的正则表达式 如果单词完全匹配 first second third 那么匹配应该失败 但如果它周围有任何字符 那么应该匹配该字符串 我还需要避免字符串中的某些字符集 如果这些字符是字符串的一部分 则匹配结
  • 用于导出到 CSV/Excel 的数据 URI(无服务器端请求):浏览器支持/限制?

    以下问题 Javascript 或 Flash 导出至 CSV Excel https stackoverflow com questions 8150516 javascript or flash export to csv excel
  • 全局定义的 AngularJS 控制器和封装

    根据 AngularJS 的教程 控制器函数仅位于全局范围内 http docs angularjs org tutorial step 04 http docs angularjs org tutorial step 04 控制器函数本身
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • chrome 扩展 - 将数据从后台传递到自定义 html 页面

    创建浏览器扩展 我必须从 background js 打开新选项卡并将 JSON 数据传递到这个新选项卡 在新选项卡中 我使用传递的 JSON 数据来操作 渲染 DOM 下面是我的 background js 的一部分 我在其中使用自定义
  • 如何为 ng-repeat orderBy 创建回调?

    寻找一种方法让 AngularJS 的 ng repeat orderBy 过滤器在完成渲染后执行回调 Markup div table thead tr th Name th th Age th tr thead tbody tr tr
  • Google 地图 v3 中标准缩放控件的样式

    有没有一种简单的方法可以在 Google Maps JavaScript API v3 中设置缩放控件的样式 我想要的只是改变标准图像 http maps gstatic com intl en ALL mapfiles mapcontro
  • Javascript - 如何计算数字的平方?

    使用 JavaScript 函数 function squareIt number return number number 当给定数字 4294967296 时 函数返回 18446744073709552000 每个人都知道真正的答案是
  • 如何在 JavaScript 中设置/更新 String 对象的值

    我有一个具有一些属性的对象字符串对象 var obj foo new String bar 我在用字符串对象因为我需要在对象上存储额外的子属性 同时仍然能够获取字符串值 obj foo baz baz obj foo gt bar 我觉得问
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo
  • 从 Node.js 调用 execl、execle、execlp、execv、execvP 或 execvp 的方法

    POSIX 系统公开了一系列exec函数 允许人们将可能不同的东西加载到当前进程中 保留打开的文件描述符 进程标识符等 可以出于多种原因执行此操作 在我的情况下 这是引导 我想更改我自己的进程的命令行选项 然后在现有进程上重新加载它 这样就
  • html5 canvas 使用图像作为蒙版

    是否可以使用具有形状的图像作为整个画布或画布内图像的蒙版 我想将图像放置在画布中 并在图像上添加蒙版 然后将其另存为新图像 您可以使用 source in globalCompositeOperation 将黑白图像用作蒙版 首先 将蒙版图

随机推荐

  • MySQL索引详细版

    一 MySQL索引是什么 MySQL索引是一种用于快速查找特定数据的数据结构 在MySQL中 索引通常是在表的某些列上创建 这些列可以是主键 唯一键或普通索引 使用索引可以极大地提高数据库查询的性能 减少数据访问时间 通过使用索引 可以避免
  • 成员函数之析构函数

    定义 析构函数 与构造函数功能相反 析构函数不是完成对象的销毁 局部对象销毁工作是由编译器完成的 而对象在销毁时会自动调用析构函数 完成类的一些资源清理工作 特征 1 析构函数名是在类名前加上字符 2 无参数无返回值 3 一个类有且只有一个
  • Flutter入门到精通:学习路线与思路

    Flutter入门到精通 学习路线与思路 Flutter是一种跨平台的移动应用开发框架 由Google开发和维护 它可以让开发者使用一套代码构建高性能 美观且流畅的移动应用程序 无论是从入门到精通 还是从零基础到掌握 都需要有一个系统而有序
  • html页面撑满整屏幕,让div撑满整个屏幕的方法(css)

    这篇文章主要介绍了关于让div撑满整个屏幕的方法 css 有着一定的参考价值 现在分享给大家 有需要的朋友可以参考一下 在body只有一个p的时候 可以通过这样的方式让p撑满整个屏幕 1 给p设置定位 复习一下 css中position有五
  • MLIR再深入 —— CodeGen 总结

    文章目录 前言 现状 Classification Dialects of Interest 一些现存的 pipelines TensorFlow Kernel Generator IREE Compiler LLVM Target IRE
  • 【Unity步步升】监控与检测物体的各种方案,如:射线、碰撞、挂载等...

    在制作AR模型数值控制方案的时候遇到了检测的问题 学习过程受益匪浅 故今天为大家整理带来一篇监控与检测物体的参考方案集合 目录 一 射线检测 二 物体存在检测 三 碰撞检测 一 射线检测 单射线检测 首先完成搭建场景如下图1 1 我这里用到
  • 微波技术与天线_HFSS_仿真实现威尔金森(Wilkinson)功分器

    1 仿真要求 设计并建模仿真微带Wilkinson功分器 对参数L70 2进行参数优化 使其满足以下性能指标 微带Wilkinson功分器性能指标 结构概览 2 步骤 1 绘制介质基板 介质基板厚度为1 6mm 长度为60mm 宽度待定 与
  • 什么才是真正的架构设计?(一)

    一 什么是架构和架构本质 在软件行业 对于什么是架构 都有很多的争论 每个人都有自己的理解 此君说的架构和彼君理解的架构未必是一回事 因此我们在讨论架构之前 我们先讨论架构的概念定义 概念是人认识这个世界的基础 并用来沟通的手段 如果对架构
  • 7-13 图的存储 (15 分)

    7 13 图的存储 15 分 输出给定图的邻接矩阵和邻接表 输入格式 输入第一行给出三个正整数 分别表示无向图的节点数N 1
  • 华为一直响应服务器异常,服务器异常是咋回事

    服务器异常是咋回事 内容精选 换一换 虚拟私有云为弹性云服务器构建隔离的 用户自主配置和管理的虚拟网络环境 提升用户云中资源的安全性 简化用户的网络部署 当您的弹性云服务器要访问Internet时 您可使用虚拟私有云创建的弹性公网IP绑定到
  • EasyPoi导入导出(一)

    EasyPoi是一个文件导入导出的工具插件 官网 http doc wupaas com docs easypoi easypoi 1c0u4mo8p4ro8 一 EasyPoi简单应用 导出excel 1 1 创建一个普通的maven项目
  • 快速部署Ceph分布式高可用集群

    快速部署Ceph分布式高可用集群 Ceph简介 Ceph是一个PB EB级别的分布式存储系统 可以提供文件存储 对象存储 和块存储 它可靠性高 易扩展 管理简便 其中对象存储和块存储可以和其他云平台集成 一个Ceph集群中有Monitor节
  • 面试题:如何测试微信朋友圈(附图)

    如果碰到这种题目 我们可以从以下几个方面来分析 功能 界面 易用性 中断 网络 兼容性 安全性 性能测试 功能测试 1 朋友圈发送功能 1 只发送文本 a 考虑文本长度 1 1500字符 该数据为百度数据 超出最大字符长度 b 考虑文本类型
  • 用Python让奇怪的想法变成现实,2023年继续创作

    2023年继续写作 用文章记录生活 时间过得真快 一下就到2023年了 由于疫情肆虐 在网络的游弋的实现也长了 写作的自然也多了 回想一下 2018 2021年这三年时间里一篇文章也没写过为0 哈哈 没错 为0 这段时间总是忙于自己的工作
  • eclipse导入mysql jdbc驱动包的具体步骤及注意事项

    1 导入的驱动包的版本和mysql的版本是对应关系的 具体关系如下 Connector J 5 1 支持Mysql 4 1 Mysql 5 0 Mysql 5 1 Mysql 6 0 alpha这些版本 Connector J 5 0 支持
  • python使用rjust把二进制数变换成指定位宽

    首先使用bin把数转换成二进制数 然后使用rjust把该数转换为指定位宽 并且可以指定以什么数对齐 使用示例 b rjust w s 其中b是一个二进制数 w是指定位宽 s是补的数 b reverse 可以把b倒序
  • notepad++突然崩溃,保存的文件没了怎么办

    notepad还是很牛逼的 备份文件 C Users 你当前用户的用户名 AppData Roaming Notepad backup可以恢复
  • codeforces 102263 J

    题目 一开始贪心 直接枚举每个位置 一直wa 不知道错哪里了 后来才发现是dp 很多种情况是无法直接贪心的 设 d p i 0
  • 手把手教你用Python轻松玩转SQL注入——渗透利器

    前言 大家好 我是黄伟 相信大家经常有听到过SQL注入啥的 但是并不是特别了解 小编以前就是经常听别人说 但是自己啥都不懂 直到后来看了相关教材后才明白 原来是这么个东西 那么到底是什么东西了 又或者是不是个东西了 我们接着往下看 一 浅谈
  • Flutter 宽高自适应

    在Flutter开发中也需要宽高自适应 手动写一个工具类 集成之后在像素后面直接使用 px或者 rpx即可 工具类代码如下 import dart ui class HYSizeFit static double screenWidth 0