概述
- Flutter單位
- 適配方案
一、Flutter單位
-
1.1、Flutter中的單位
在進(jìn)行Flutter開發(fā)時(shí)，我們通常不需要傳入尺寸的單位，那么Flutter使用的是什么單位呢？
Flutter使用的是類似于iOS中的點(diǎn)pt，也就是 point。
所以我們經(jīng)常說iPhone6的尺寸是375x667，但是它的分辨率其實(shí)是750x1334。
因?yàn)?code>iPhone6的dpr（devicePixelRatio）是2.0，iPhone 6plus的dpr是3.0蘋果的屏幕尺寸在Flutter開發(fā)中，我們使用的是對(duì)應(yīng)的
屏幕物理尺寸 -
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");提示:如下代碼，因?yàn)槲覀兿朐贛yApp的build拿到設(shè)備信息，那么我們就不能用 MediaQuery 了，我么就需要用 window，因?yàn)?MediaQuery 的本質(zhì)也是用的 window，在下面會(huì)詳細(xì)的陳述
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // 這里是拿不到 MediaQuery 信息的 return MaterialApp( // 啟動(dòng)要顯示的界面 home: HomePage(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { // 這里 可以 拿不到 MediaQuery 信息 return Container(); } }-
獲取一些設(shè)備相關(guān)的信息，可以使用官方提供的一個(gè)庫device_info
dependencies: device_info: ^0.4.2+4
-
二、適配方案
-
2.1. 適配概述
假如我們有下面這樣一段代碼：
在屏幕中間顯示一個(gè)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),), ), ), ); }上面的代碼在不同屏幕上會(huì)有不同的表現(xiàn)：1、很明顯，如果按照上面的規(guī)則，在iPhone5上面，尺寸過大，在iPhone6plus上面尺寸過小；2、在開發(fā)中，我們應(yīng)該可以根據(jù)不同的屏幕來完成尺寸的縮放
-
在前端開發(fā)中，針對(duì)不同的屏幕常見的適配方案有下面幾種
- 1>、rem：
- rem是給根標(biāo)簽（HTML標(biāo)簽）設(shè)置一個(gè)字體大小；
- 但是不同的屏幕要?jiǎng)赢嬙O(shè)置不同的字體大?。梢酝ㄟ^媒體查詢，也可以通過js動(dòng)態(tài)計(jì)算）；
- 其它所有的單位都使用rem單位（相對(duì)于根標(biāo)簽）；
- 2>、vw、wh：
- vw和vh是將屏幕（視口）分成100等份，一個(gè)1vw相當(dāng)于是1%的大??；
- 其它所有的單位都使用vw或wh單位；
- 3>、rpx：
- rpx是小程序中的適配方案，它將750px作為設(shè)計(jì)稿，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-
那么我們就可以通過上面的計(jì)算方式，算出一個(gè)rpx，再將自己的size和rpx單位相乘即可：
- 比如100px的寬度：100 * 2 * rpx
- 在iPhone5上計(jì)算出的結(jié)果是84px
- 在iPhone6上計(jì)算出的結(jié)果是100px
- 在iPhone6plus上計(jì)算出的結(jié)果是110.4px
-
我們自己來封裝一個(gè)工具類：JKSizeFit，也可以傳入一個(gè)可選的參數(shù)，以什么尺寸作為設(shè)計(jì)稿
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; // 導(dǎo)航欄的高度 static double navigationBarHeight; // 底部的高度，有劉海的34，沒有劉海的0 static double bottomHeight; // 底部tabbar的高度 static double bottomTabBarHeight; // rpx 和 px static double rpx; static double px; // 判斷是手機(jī)是不是 iphoneX static bool isIphoneX; // 模仿小程序以 6s 寬度的 750 分辨率為適配基點(diǎn)，分成750份 static void initialze({double standarSize = 750}) { // 1.手機(jī)物理分辨率 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),), ) ); } }我們來看一下實(shí)現(xiàn)效果：
JKSizeFit適配效果
-
2.3、屏幕適配也可以使用第三方庫：flutter_screenutil
