概述
- Flutter单位
- 适配方案
一、Flutter单位
- 1.1、Flutter中的单位
在进行Flutter开发时，我们通常不需要传入尺寸的单位，那么Flutter使用的是什么单位呢？
Flutter使用的是类似于iOS中的点pt，也就是 point。
所以我们经常说iPhone6的尺寸是375x667，但是它的分辨率其实是750x1334。
因为iPhone6的dpr（devicePixelRatio）是2.0，iPhone 6plus的dpr是3.0
- 在Flutter开发中，我们使用的是对应的
屏幕物理尺寸 - 1.2. Flutter设备信息获取屏幕上的一些信息，可以通过MediaQuery，前提是MediaQuery已经初始化
// 1.媒体查询信息 final mediaQueryData = MediaQuery.of(context); // 2.获取宽度和高度 final screenWidth = mediaQueryData.size.width; final screenHeight = mediaQueryData.size.height; final physicalWidth = window.physicalSize.width; final physicalHeight = window.physicalSize.height; final dpr = window.devicePixelRatio; print("屏幕width:$screenWidth height:$screenHeight"); print("分辨率: $physicalWidth - $physicalHeight"); print("dpr: $dpr"); // 3.状态栏的高度 // 有刘海的屏幕:44 没有刘海的屏幕为20 final statusBarHeight = mediaQueryData.padding.top; // 有刘海的屏幕:34 没有刘海的屏幕0 final bottomHeight = mediaQueryData.padding.bottom; print("状态栏height: $statusBarHeight 底部高度:$bottomHeight");
提示:如下代码，因为我们想在MyApp的build拿到设备信息，那么我们就不能用 MediaQuery 了，我么就需要用 window，因为 MediaQuery 的本质也是用的 window，在下面会详细的陈述
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // 这里是拿不到 MediaQuery 信息的 return MaterialApp( // 启动要显示的界面 home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 这里 可以 拿不到 MediaQuery 信息 return Container(); } }
- 获取一些设备相关的信息，可以使用官方提供的一个库device_info
dependencies: device_info: ^0.4.2+4
二、适配方案
- 2.1. 适配概述假如我们有下面这样一段代码：在屏幕中间显示一个200*200的ContainerContainer中有一段文字是30
class HYHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("首页"), ), body: Center( child: Container( width: 200, height: 200, color: Colors.red, alignment: Alignment.center, child: Text("Hello World", style: TextStyle(fontSize: 30, color: Colors.white),), ), ), ); }
- 上面的代码在不同屏幕上会有不同的表现：1、很明显，如果按照上面的规则，在iPhone5上面，尺寸过大，在iPhone6plus上面尺寸过小；2、在开发中，我们应该可以根据不同的屏幕来完成尺寸的缩放
- 在前端开发中，针对不同的屏幕常见的适配方案有下面几种
- 1>、rem：
- rem是给根标签（HTML标签）设置一个字体大小；
- 但是不同的屏幕要动画设置不同的字体大小（可以通过媒体查询，也可以通过js动态计算）；
- 其它所有的单位都使用rem单位（相对于根标签）；
- 2>、vw、wh：
- vw和vh是将屏幕（视口）分成100等份，一个1vw相当于是1%的大小；
- 其它所有的单位都使用vw或wh单位；
- 3>、rpx：
- rpx是小程序中的适配方案，它将750px作为设计稿，1rpx=屏幕宽度/750；
- 其它所有的单位都使用rpx单位；
- 这里我们采用小程序的 rpx 来完成Flutter的适配
- 2.2、rpx适配，小程序中rpx的原理如下不管是什么屏幕，统一分成750份在iPhone5上：1rpx = 320/750 = 0.4266 ≈ 0.42px在iPhone6上：1rpx = 375/750 = 0.5px在iPhone6plus上：1rpx = 414/750 = 0.552px
- 那么我们就可以通过上面的计算方式，算出一个rpx，再将自己的size和rpx单位相乘即可：
- 比如100px的宽度：100 * 2 * rpx
- 在iPhone5上计算出的结果是84px
- 在iPhone6上计算出的结果是100px
- 在iPhone6plus上计算出的结果是110.4px
- 我们自己来封装一个工具类：JKSizeFit，也可以传入一个可选的参数，以什么尺寸作为设计稿
import 'dart:ui'; import 'package:flutter/material.dart'; class JKSizeFit { // 分辨率的宽度 static double physicalWith; // 分辨率的宽度 static double physicalHeight; // 获取 dpr 倍率 @1x @2x @3x static double dpr; // 屏幕的宽度和高度 static double screenWidth; static double screenHeight; // 状态栏的高度 // 顶部状态栏的高度，有刘海的44，没有刘海的20 static double topStatusHeight; // 导航栏的高度 static double navigationBarHeight; // 底部的高度，有刘海的34，没有刘海的0 static double bottomHeight; // 底部tabbar的高度 static double bottomTabBarHeight; // rpx 和 px static double rpx; static double px; // 判断是手机是不是 iphoneX static bool isIphoneX; // 模仿小程序以 6s 宽度的 750 分辨率为适配基点，分成750份 static void initialze({double standarSize = 750}) { // 1.手机物理分辨率 physicalWith = window.physicalSize.width; physicalHeight = window.physicalSize.height; // 2.获取 dpr 倍率 @1x @2x @3x dpr = window.devicePixelRatio; // 3.屏幕的宽度和高度 screenWidth = physicalWith / dpr; screenHeight = physicalHeight / dpr; // 4.状态栏的高度 topStatusHeight = window.padding.top / dpr; navigationBarHeight = topStatusHeight + 44; bottomHeight = window.padding.bottom / dpr; bottomTabBarHeight = bottomHeight + 49; // 5.rpx 和 px rpx = screenWidth / standarSize; px = screenWidth / standarSize * 2; // 6.判断是不是iphoneX isIphoneX = topStatusHeight > 20 ? true : false; } static double setRpx(double size) { return rpx * size; } static double setPx(double size) { return px * size; } } extension DoubleFit on double { double get px { return JKSizeFit.setPx(this); } double get rpx { return JKSizeFit.setRpx(this); } } extension IntFit on int { double get px { return JKSizeFit.setPx(this.toDouble()); } double get rpx { return JKSizeFit.setRpx(this.toDouble()); } }
- 初始化JKSizeFit类的属性，任意位置都可以，建议放到MaterialApp之前的位置
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // 初始化适配器 JKSizeFit.initialze(); return MaterialApp(); } }
- 使用rpx 封装的 JKSizeFit 来完成屏幕适配：
class JKMallContent extends StatefulWidget { @override _JKMallContentState createState() => _JKMallContentState(); } class _JKMallContentState extends State<JKMallContent> { @override Widget build(BuildContext context) { return Center( child: Container( alignment: Alignment.center, color: Colors.brown, width: 200.px, height: 400.rpx, child: Text('诗集', style: TextStyle(fontSize: 30.px, color: Colors.green),), ) ); } }
- 我们来看一下实现效果：
.3、屏幕适配也可以使用第三方库：flutter_screenutil
