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;
}
相关推荐
恋猫de小郭1 天前
Flutter 在 iOS 26 模拟器跑不起来?其实很简单
android·前端·flutter
大雷神2 天前
Flutter鸿蒙开发
flutter·华为·harmonyos
shelutai2 天前
实现提供了完整的 Flutter Web 文件上传解决方案
前端·flutter
小仙女喂得猪2 天前
2025 Android原生开发者角度的Flutter 笔记整理(对比ReactNative)
android·flutter·react native
猪哥帅过吴彦祖2 天前
Flutter 系列教程:列表与网格 - `ListView` 和 `GridView`
前端·flutter·ios
程序员老刘3 天前
为什么我从不推荐GetX?11k星标背后的真相
flutter·客户端
dragon7253 天前
flutter riverpod原理浅析
flutter
恋猫de小郭3 天前
深入理解 Flutter 的 PlatformView 如何在鸿蒙平台实现混合开发
android·前端·flutter
浅蓝色3 天前
flutter平台判断后续
flutter·harmonyos
猪哥帅过吴彦祖3 天前
Flutter 系列教程:常用基础组件 (下) - `TextField` 和 `Form`
前端·flutter·ios