Flutter屏幕适配

简介: Flutter屏幕适配


一、Flutter单位

Flutter使用的是类似IOS中的点pt(point)。

iPhone6的尺寸是375x667,分辨率为750x1334。

iPhone6的dpr( devicePixelRatio ) 是2.0。

DPR = 物理像素 / 逻辑像素

二、设备信息

通过MediaQuery获取屏幕上的信息。

// 1. 媒体查询信息
final mediaQuery = MediaQuery.of(context);
// 2. 获取宽度和高度
final screenWidth = mediaQuery .size.width;
final screenHeight = mediaQuery .size.heigth;
// 3. 状态栏信息
final statusBarHeigth = mediaQuery .padding.top;
final bottomHeight =    mediaQuery .padding.bottom;

三、常见适配方案

  1. rem
    rem是给根标签( HTML标签 )设置一个字体大小,其他所有的单位都使用rem单位(相对于根标签)。
    浏览器默认的font-size值为16px。
    可以通过更改根元素的大小,调整所有字体大小。
  2. vw、vhvw和vh是将屏幕分成100等分,1个vw相当于是1%的大小。基于视图窗口的单位。
  • vmin: 选取vw和vh中最小的那个,在手机竖屏时,1vmin = 1vw
  • vmax: 选取vw和vh中最大的那个,在手机竖屏时,1vmax = 1vh
  1. rpx
    rpx是小程序中适配的方案,将750px作为设计稿, 1rpx = 屏幕宽度/750

安全区域适配

在一些手机中,顶部有刘海、摄像头等,底部有话筒等,这些位置不能填充组件,有被阻挡的风险

全面屏适配

  • 在页面中使用了 Scaffold 的 appBar 和 bottomNavigationBar,Scaffold 框架会自动按照全面屏的机制进行适配 ,不需要开发者进行手动配置。
  • 如果页面中没有使用 Scaffold , 或者使用了 Scaffold没有使用appBar和bottomNavigationBar,这样顶部导航栏偏上,底部导航栏偏下,这里需要适配一下。可以使用 MediaQuery.of(context).padding 获取屏幕四个方向上的 Padding,然后进行适配。

四、flutter_screenutil

使用pub.dev上的第三方插件库flutter_screenutil实现屏幕的适配。

https://pub.dev/packages/flutter_screenutil

flutter_screenutil介绍

flutter_screenutil库的功能

  • 屏幕适配:flutter_screenutil可以根据设备的屏幕尺寸和密度,将设计稿上的尺寸转换为适合当前设备的实际尺寸。这样,无论是在小屏幕手机上还是在大屏幕平板电脑上运行应用,UI元素都能正确地适配屏幕。
  • 尺寸适配:flutter_screenutil提供了setWidth()setHeight()方法,通过传入设计稿上的尺寸,可以根据设备的屏幕宽度进行动态调整,返回适配后的实际宽度。
  • 字体适配:flutter_screenutil提供了setSp()方法,可以根据设备的屏幕密度进行字体大小的适配。通过传入设计稿上的字体大小,可以根据当前设备的屏幕密度动态调整字体大小。

flutter_screenutil使用

flutter packages get

flutter_screenutil api

ScreenUtil.init( context, designSize:const Size(375,667));
ScreenUtil().setWidth(xxx);

常用的api

ScreenUtil().setWidth(540)  //根据屏幕宽度适配尺寸
ScreenUtil().setHeight(200) //根据屏幕高度适配尺寸(一般根据宽度适配即可)
ScreenUtil().radius(200)    //根据宽度或高度中的较小者进行调整
ScreenUtil().setSp(24)      //字体大小适配
// 简写方式
ScreenUtil().setWidth(540)  =>  540.h
ScreenUtil().setHeight(200) =>  200.w
ScreenUtil().radius(200)    =>  200.r
ScreenUtil().setSp(24)      =>  24.sp

一般情况下1.w != 1.h,除非刚好屏幕分辨率比例与设计图比例一致。如果要设置为正方形,要使用相同的单位( 同为w或者同为h ), 否则可能显示为长方形。

相关文章
|
编解码 移动开发 小程序
Flutter屏幕适配
目前移动端的设备已经非常多,并且不同的设备手机屏幕也不相同。 目前做移动端开发都要针对不同的设备进行一定的适配,无论是移动原生开发、小程序、H5页面。 Flutter中如何针对不同的手机屏幕来进行适配呢?我们一起来聊聊这个话题。
1103 0
Flutter屏幕适配
|
移动开发 Dart 小程序
Flutter-屏幕适配方案
我相信每个移动端开发者都避不开这个问题,就是屏幕适配。
Flutter-屏幕适配方案
|
编解码 小程序 前端开发
Day16 - Flutter - 屏幕适配
Day16 - Flutter - 屏幕适配
496 0
Day16 - Flutter - 屏幕适配
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
28天前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
56 8
|
28天前
|
存储 JavaScript 前端开发
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战。本文介绍了几种常用的状态管理框架,如Provider和Redux,分析了它们的基本原理、优缺点及适用场景,并提供了选择框架的建议和使用实例,旨在帮助开发者提高开发效率和应用性能。
35 4
|
28天前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
39 2
|
2月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
103 3
|
1月前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
230 0
|
1月前
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装:提升开发效率与用户体验
在移动应用开发中,表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单,以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势,封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧,帮助开发者构建健壮且用户友好的应用。
80 0