概述
- Flutter單位
- 適配方案
一、Flutter單位
-
1.1菠秒、Flutter中的單位
在進行Flutter開發(fā)時疙剑，我們通常不需要傳入尺寸的單位氯迂，那么Flutter使用的是什么單位呢？
Flutter使用的是類似于iOS中的點pt言缤，也就是 point嚼蚀。
所以我們經(jīng)常說iPhone6的尺寸是375x667，但是它的分辨率其實是750x1334管挟。
因為iPhone6的dpr（devicePixelRatio）是2.0轿曙，iPhone 6plus的dpr是3.0蘋果的屏幕尺寸在Flutter開發(fā)中，我們使用的是對應的
屏幕物理尺寸 -
1.2. Flutter設(shè)備信息
獲取屏幕上的一些信息僻孝，可以通過MediaQuery导帝，前提是MediaQuery已經(jīng)初始化// 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.狀態(tài)欄的高度 // 有劉海的屏幕:44 沒有劉海的屏幕為20 final statusBarHeight = mediaQueryData.padding.top; // 有劉海的屏幕:34 沒有劉海的屏幕0 final bottomHeight = mediaQueryData.padding.bottom; print("狀態(tài)欄height: $statusBarHeight 底部高度:$bottomHeight");提示:如下代碼，因為我們想在MyApp的build拿到設(shè)備信息穿铆，那么我們就不能用 MediaQuery 了您单，我么就需要用 window，因為 MediaQuery 的本質(zhì)也是用的 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(); } }-
獲取一些設(shè)備相關(guān)的信息睹限，可以使用官方提供的一個庫device_info
dependencies: device_info: ^0.4.2+4
-
二、適配方案
-
2.1. 適配概述
假如我們有下面這樣一段代碼：
在屏幕中間顯示一個200*200的Container
Container中有一段文字是30class 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),), ), ), ); }上面的代碼在不同屏幕上會有不同的表現(xiàn)：1讯檐、很明顯，如果按照上面的規(guī)則染服，在iPhone5上面别洪，尺寸過大，在iPhone6plus上面尺寸過辛巍挖垛；2、在開發(fā)中秉颗，我們應該可以根據(jù)不同的屏幕來完成尺寸的縮放
-
在前端開發(fā)中痢毒，針對不同的屏幕常見的適配方案有下面幾種
- 1>、rem：
- rem是給根標簽（HTML標簽）設(shè)置一個字體大胁仙哪替；
- 但是不同的屏幕要動畫設(shè)置不同的字體大小（可以通過媒體查詢菇怀，也可以通過js動態(tài)計算）凭舶；
- 其它所有的單位都使用rem單位（相對于根標簽）；
- 2>爱沟、vw帅霜、wh：
- vw和vh是將屏幕（視口）分成100等份，一個1vw相當于是1%的大泻羯臁身冀；
- 其它所有的單位都使用vw或wh單位；
- 3>、rpx：
- rpx是小程序中的適配方案搂根，它將750px作為設(shè)計稿珍促，1rpx=屏幕寬度/750；
- 其它所有的單位都使用rpx單位兄墅；
這里我們采用小程序的 rpx 來完成Flutter的適配
- 1>、rem：
-
-
2.2踢星、rpx適配，小程序中rpx的原理如下
不管是什么屏幕隙咸，統(tǒng)一分成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上計算出的結(jié)果是84px
- 在iPhone6上計算出的結(jié)果是100px
- 在iPhone6plus上計算出的結(jié)果是110.4px
-
我們自己來封裝一個工具類：JKSizeFit五督，也可以傳入一個可選的參數(shù)藏否，以什么尺寸作為設(shè)計稿
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; // 狀態(tài)欄的高度 // 頂部狀態(tài)欄的高度，有劉海的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.狀態(tài)欄的高度 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),), ) ); } }我們來看一下實現(xiàn)效果：
JKSizeFit適配效果
-
2.3家浇、屏幕適配也可以使用第三方庫：flutter_screenutil
