Flutter学习-屏幕适配

最新推荐文章于 2025-09-22 10:04:10 发布

原创

最新推荐文章于 2025-09-22 10:04:10 发布 · 1.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍Flutter中的屏幕适配方法，包括单位使用、设备信息获取、常见适配方案及rpx适配实现。

屏幕适配

1. Flutter的单位
2. 适配方案
- 2.1 常用的适配方案
- 2.2 rpx适配

目前移动端设备非常多，并且不同的设备手机屏幕也不相同。
目前做移动端开发都要针对不同的设备进行一定的匹配，无论是移动原生开发、小程序、H5页面
那么下面我们来学习下，Flutter中如何针对不同的手机屏幕来进行适配

1. Flutter的单位

1.1 Flutter中的单位

在进行Flutter开发时，我们通常不需要传入尺寸的单位，那么Flutter使用的是什么单位呢？

Flutter使用的是类似IOS中的点pt，也就是point
所以我们经常说iphone6的尺寸是375x667,但是它的分辨率其实是750x1334
因为iphone6的dpr（devicePixelRatio）是2.0，iPhone6plus的dpr是3.0

在Flutter开发中我们使用的是对应的逻辑分辨率

1.2 Flutter的设备信息

获取屏幕上的一些信息，可以通过MediaQuery

//获取媒体查询信息对象
          final mediaQueryData = MediaQuery.of(context);
          //获取屏幕的宽度和高度
          final kScreenWidth = mediaQueryData.size.width;
          final kScreenHeight = mediaQueryData.size.height;
          final phySicalWidth = window.physicalSize.width;
          final phySicalHeight = window.physicalSize.height;

          final dpr = window.devicePixelRatio;

          print("屏幕的宽度===$kScreenWidth, 屏幕的高度===$kScreenHeight");
          print("分辨率： phySicalWidth==$phySicalWidth, phySicalHeight===$phySicalHeight");
          print("dpr=======$dpr");

          // 3.状态栏的高度
          // 有刘海的屏幕:44 没有刘海的屏幕为20
          final statusBarHeight = mediaQueryData.padding.top;
          // 有刘海的屏幕:34 没有刘海的屏幕0
          final bottomHeight = mediaQueryData.