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;
}
相关推荐
傅里叶5 小时前
Flutter项目使用 buf.build
flutter
恋猫de小郭7 小时前
iOS 26 开始强制 UIScene ,你的 Flutter 插件准备好迁移支持了吗?
android·前端·flutter
yuanlaile7 小时前
Flutter开发HarmonyOS鸿蒙App商业项目实战已出炉
flutter·华为·harmonyos
CodeCaptain8 小时前
可直接落地的「Flutter 桥接鸿蒙 WebSocket」端到端实施方案
websocket·flutter·harmonyos
stringwu8 小时前
Flutter 中的 MVVM 架构实现指南
前端·flutter
消失的旧时光-194321 小时前
Flutter 异步体系终章:FutureBuilder 与 StreamBuilder 架构优化指南
flutter·架构
消失的旧时光-19431 天前
Flutter 异步 + 状态管理融合实践:Riverpod 与 Bloc 双方案解析
flutter
程序员老刘1 天前
Flutter版本选择指南:避坑3.27,3.35基本稳定 | 2025年10月
flutter·客户端
—Qeyser1 天前
Flutter网络请求Dio封装实战
网络·flutter·php·xcode·android-studio