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

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

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

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

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

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

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

Dart 复制代码
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;
}
相关推荐
Jinkey5 小时前
FlutterBasic - GetBuilder、Obx、GetX<Controller>、GetxController 有啥区别
android·flutter·ios
Summer不秃9 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰9 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
sunly_9 小时前
Flutter:AnimatedSwitcher当子元素改变时,触发动画
flutter
AiFlutter9 小时前
Flutter封装Coap
flutter
旭日猎鹰15 小时前
Flutter踩坑记录(三)-- 更改入口执行文件
flutter
旭日猎鹰15 小时前
Flutter踩坑记录(一)debug运行生成的项目,不能手动点击运行
flutter
️ 邪神15 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View
flutter·ios·鸿蒙·reactnative·anroid
比格丽巴格丽抱1 天前
flutter项目苹果编译运行打包上线
flutter·ios
SoaringHeart1 天前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter