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;
}
相关推荐
zhangmeng1 小时前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 小时前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 小时前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan5 小时前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓6 小时前
Flutter Getx 的页面传参
flutter
火柴就是我1 天前
flutter 之真手势冲突处理
android·flutter
Speed1231 天前
`mockito` 的核心“打桩”规则
flutter·dart
法的空间1 天前
Flutter JsonToDart 支持 JsonSchema
android·flutter·ios
恋猫de小郭1 天前
Android 将强制应用使用主题图标,你怎么看?
android·前端·flutter
玲珑Felone1 天前
从flutter源码看其渲染机制
android·flutter