屏幕适配(自适应)方案
现代手机屏幕尺寸各不相同,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同。为了达到一套代码所有手机体验一致效果,需要做尺寸上的适配。
计算公式:实际尺寸 = UI尺寸 * 设备宽度/设计图宽度
1px方案 : 1px = 1 / 设备像素比
750设计图为例
import 'package:flutter/material.dart';
import 'dart:ui';
class Adapt {
static MediaQueryData mediaQuery = MediaQueryData.fromWindow(window);
static double _width = mediaQuery.size.width;
static double _height = mediaQuery.size.height;
static double _topbarH = mediaQuery.padding.top;
static double _botbarH = mediaQuery.padding.bottom;
static double _pixelRatio = mediaQuery.devicePixelRatio;
static var _ratio;
static init(int number){
int uiwidth = number is int ? number : 750;
_ratio = _width / uiwidth;
}
static px(number){
if(!(_ratio is double || _ratio is int)){Adapt.init(750);}
return number * _ratio;
}
static onepx(){
return 1/_pixelRatio;
}
static screenW(){
return _width;
}
static screenH(){
return _height;
}
static padTopH(){
return _topbarH;
}
static padBotH(){
return _botbarH;
}
}
// 设置文本大小 30 为设计图尺寸
new Text(
'Hello World!',
style: TextStyle(
fontSize: Adapt.px(30),
)
)
// 容器尺寸大小设置 一个设计图为 300*300像素的容器
new Container( width: Adapt.px(300),
height: Adapt.px(300),
)
// 1px
new Container(
decoration: new BoxDecoration(
border: new Border(bottom:BorderSide(width: Adapt.one())),
),
)
屏幕适配方案插件-完美解决屏幕适配
添加依赖
dependencies:
flutter:
sdk: flutter
# 添加依赖
flutter_screenutil: ^0.5.0
属性 |
类型 |
默认值 |
描述 |
width |
int |
1080px |
设计稿中设备的宽度,单位px |
height |
int |
1920px |
设计稿中设备的高度,单位px |
allowFontScaling |
bool |
false |
设置字体大小是否根据系统的“字体大小”辅助选项来进行缩放 |
初始化
@override
Widget build(BuildContext context) {
ScreenUtil.init(context, width: 750, height: 1624, allowFontScaling: true);
}
//填入设计稿中设备的屏幕尺寸
//默认 width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
//假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
//设置字体大小根据系统的“字体大小”辅助选项来进行缩放,默认为false : 字体随着系统的“字体大小”辅助选项来进行缩放
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
适配尺寸
//长方形:
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
),
//如果你想显示一个正方形:
Container(
width: ScreenUtil.getInstance().setWidth(300),
height: ScreenUtil.getInstance().setWidth(300),
),
适配字体-传入设计稿的px尺寸
//传入字体大小,默认不根据系统的“字体大小”辅助选项来进行缩放(可在初始化ScreenUtil时设置allowFontScaling)
ScreenUtil.getInstance().setSp(28)
//传入字体大小,根据系统的“字体大小”辅助选项来进行缩放(如果某个地方不遵循全局的allowFontScaling设置)
ScreenUtil(allowFontScaling: true).setSp(28)
//for example:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是25px,不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
Text('我的文字大小在设计稿上是25px,会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
],
)
其他相关api
ScreenUtil.pixelRatio //设备的像素密度
ScreenUtil.screenWidth //设备宽度
ScreenUtil.screenHeight //设备高度
ScreenUtil.bottomBarHeight //底部安全区距离,适用于全面屏下面有按键的
ScreenUtil.statusBarHeight //状态栏高度 刘海屏会更高 单位px
ScreenUtil.textScaleFactory //系统字体缩放比例
ScreenUtil.getInstance().scaleWidth // 实际宽度的dp与设计稿px的比例
ScreenUtil.getInstance().scaleHeight // 实际高度的dp与设计稿px的比例
@override
Widget build(BuildContext context) {
//设置适配尺寸 (填入设计稿中设备的屏幕尺寸) 假如设计稿是按iPhone6的尺寸设计的(iPhone6 750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
print('设备宽度:${ScreenUtil.screenWidth}'); //Device width
print('设备高度:${ScreenUtil.screenHeight}'); //Device height
print('设备的像素密度:${ScreenUtil.pixelRatio}'); //Device pixel density
print(
'底部安全区距离:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen
print(
'状态栏高度:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
print('实际宽度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}');
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
print(
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil.textScaleFactory}');
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
children: <Widget>[
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
color: Colors.red,
child: Text(
'我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12),
),
),
),
Container(
width: ScreenUtil.getInstance().setWidth(375),
height: ScreenUtil.getInstance().setHeight(200),
color: Colors.blue,
child: Text('我的宽度:${ScreenUtil.getInstance().setWidth(375)}dp',
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil.getInstance().setSp(12),
)),
),
],
),
Text('设备宽度:${ScreenUtil.screenWidth}px'),
Text('设备高度:${ScreenUtil.screenHeight}px'),
Text('设备的像素密度:${ScreenUtil.pixelRatio}'),
Text('底部安全区距离:${ScreenUtil.bottomBarHeight}px'),
Text('状态栏高度:${ScreenUtil.statusBarHeight}px'),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'实际高度的dp与设计稿px的比例:${ScreenUtil.getInstance().scaleHeight}',
textAlign: TextAlign.center,
),
Text(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
Text(
'高度相对于设计稿放大的比例:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
textAlign: TextAlign.center,
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(100),
),
Text('系统的字体缩放比例:${ScreenUtil.textScaleFactory}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('我的文字大小在设计稿上是25px,不会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
Text('我的文字大小在设计稿上是25px,会随着系统的文字缩放比例变化',
style: TextStyle(
color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
],
)
],
),
),
);
}
全面屏、折叠屏适配与兼容问题
一 启动白屏问题
采用Flutter 开发的app,无论Android还是Ios,都会出现白屏的现象,大概持续1-3秒,他会根据手机或模拟器的速溶而不同,时间可长可短。Flutter 应用在启动的时候会先启动Flutter SDK, 然后加载到内存里面 ,然后完成渲染,在这个过程中 它是没有内容可以显示的,因此会显示白屏.
二 解决白屏问题
(1)可以在flutter项目中引入插件
注意 :Android App启动的时候,会有一个默认的白屏 ,这个白屏在启动的时候会显示主题,如果主体色不是透明的 就会有个白屏
Android的白屏非两个部分,一个是主题的白屏(如果主题不是透明的时候,点击图标会显示白屏),二,当App启动起来之后,会显示启动屏(如果没有启动屏,会显示默认的白屏)
二 Flutter 全面屏适配指南
1)全面屏特点,以及存在问题
特点:
1 大屏占比高、长宽比不再试16:9,达到了19.5:9甚至更高
2 短边的像素,density的取值是一样的 所有适配的是长边
问题:
1. 传统布局的高度不足,导致上下留黑边
2. 基于屏幕顶部或底部的布局,如弹框,在全面屏手机上会发生位移
3. 安全区域问题
Flutter中全面屏的页面适配分两种情况:
1.一种是对于页面已经使用了Scaffold的appBar 与bottomNavigationBar页面是不需要额外适配的,因为Scaffold框架会自动化帮助我们完成这些适配工作;
2. 另外一种情况,没有使用了Scaffold或者Scaffold的appBar 与bottomNavigationBar页面,改如何适配全面屏呢?
(1) 适配要点
. 顶部NavigationBar上部留安全区域
. 底部NavigationBar底部留安全区域
对于安全区域的适配有两种方案:
1. 采用 SafeArea来包裹页面,SafeArea是Flutter中的一个用于全面屏的一个组件,类似RN中SafeAreaView 主要用于解决适配全面屏手机的安全取悦问题;
2.借助MeadiaQuery.of(context).padding 获取屏幕四周的padding,然后根据padding自己手动实现对安全区域的控制;
. 方案一:相对简单的,只需要引入SafeArea,但不够灵活
. 方案二:需要借助MeadiaQuery.of(context).padding自己实现对安全区域的控制,相对复杂些,但灵活度高
借助 MediaQuery.of(context).padding手动适配
提示:使用MediaQuery.of时要留意它所属的widget 不能直接和runApp解除,需要一个带有MaterialApp的widget 包裹一下这样才能使用MediaQuery.of