05_Flutter屏幕适配
一.屏幕适配方案
通过指定基准屏宽度，进行适配，基准屏宽度取决于设计图的基准宽度，以iphone 14 pro max为例，
devicePixelRatio = 物理宽度 / 逻辑宽度(基准宽度)
iphone 14 pro max的物理尺寸宽度为1290，基准屏尺寸375，也就是逻辑尺寸，因此可以得到像素比devicePixelRatio为3.44。
也就是说1个逻辑像素 = 3.4个物理像素。这样就把多样化的物理尺寸宽度都统一成了375的逻辑像素。搭建界面的时候以375的逻辑宽度去搭建即可。
二.确定新的逻辑尺寸和像素比
竖屏状态下，Flutter默认的逻辑像素的计算规则是：
逻辑宽度 = 物理宽度 / 像素比
Flutter默认的像素比使用的是像素密度，就是我们平时常说的一倍屏、二倍屏、三倍屏。三倍屏的像素密度是3.0…
因此，我们需要修改默认的逻辑尺寸，将逻辑宽度统一成375。首先确定新的像素比devicePixelRatio。
新的像素比 = 物理宽度 / 375
从而确定新的逻辑尺寸为:
新的逻辑尺寸 = 默认的逻辑尺寸 / 新的像素比
三.默认的逻辑尺寸和像素比的确定过程
那么接下来的问题就是怎么将Flutter默认的逻辑尺寸和像素比修改为新的逻辑尺寸和像素比了，查看源码可以知道，runApp时首先会示例化一个WidgetsFlutterBinding的单例对象。
void runApp(Widget app) {
final WidgetsBinding binding = WidgetsFlutterBinding.ensureInitialized();
assert(binding.debugCheckZone('runApp'));
binding
..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))
..scheduleWarmUpFrame();
}
也就是通过WidgetsFlutterBinding.ensureInitialized()来实例话这个静态单例。后续我们可以通过WidgetsBinding.instance拿到这个对象:
class WidgetsFlutterBinding extends BindingBase with GestureBinding, SchedulerBinding, ServicesBinding, PaintingBinding, SemanticsBinding, RendererBinding, WidgetsBinding {
static WidgetsBinding ensureInitialized() {
if (WidgetsBinding._instance == null) {
WidgetsFlutterBinding();
}
return WidgetsBinding.instance;
}
}
而WidgetsFlutterBinding是继承了BindingBase的，因此WidgetsFlutterBinding示例化的同时，会调用BindingBase的构造方法，接着看BindingBase的构造方法:
BindingBase() {
...
initInstances();
...
}
BindingBase的构造方法中，会调用initInstances()，initInstances()调用的同时，会调用RendererBinding的initInstances()方法，接着看RendererBinding的initInstances方法:
void initInstances() {
super.initInstances();
...
initRenderView();
...
}
RendererBinding的initInstances方法中，会调用initRenderView方法，接着看RendererBinding的initRenderView方法:
void initRenderView() {
...
renderView = RenderView(configuration: createViewConfiguration(), view: platformDispatcher.implicitView!);
...
}
RendererBinding的initRenderView方法会创建一个RenderView对象，同时RendererBinding为renderView提供了set方法，这就意味着我们可以在外部重新设置renderView的值，创建RenderView的时候会传入ViewConfiguration，和一个FlutterView对象，通过这个FlutterView对象，我们可以获取到设备的物理尺寸以及像素密度，以Android为例，这个FlutterView对象就对应着Acrivity的DecorView。接着看createViewConfiguration方法:
ViewConfiguration createViewConfiguration() {
final FlutterView view = platformDispatcher.implicitView!;
final double devicePixelRatio = view.devicePixelRatio;
return ViewConfiguration(
size: view.physicalSize / devicePixelRatio,
devicePixelRatio: devicePixelRatio,
);
}
可以看到，ViewConfiguration对象的创建过程，会传递默认的像素比，以及确定默认的逻辑尺寸，这里就是我们第一个需要修改的地方，那么怎么修改，毫无疑问，需要把RendererBinding的renderView的值替换成我们自己创建的，这样我们就可以根据自己计算的逻辑尺寸和像素比去创建ViewConfiguration了。
四.MediaQuery的确定过程
回到runApp的源码:
void runApp(Widget app) {
...
binding
..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))
...
}
WidgetsFlutterBinding示例化完成后，会通过WidgetsFlutterBinding的wrapWithDefaultView方法包装MaterialApp。接着看WidgetsFlutterBinding的wrapWithDefaultView方法:
Widget wrapWithDefaultView(Widget rootWidget) {
return View(
view: platformDispatcher.implicitView!,
child: rootWidget,
);
}
可以看到，这里使用了View包装MaterialApp，那么接着看View的build方法:
Widget build(BuildContext context) {
return _ViewScope(
view: view,
child: MediaQuery.fromView(
view: view,
child: child,
),
);
}
MediaQuery的build过程:
Widget build(BuildContext context) {
MediaQueryData effectiveData = _data!;
if (!kReleaseMode && _parentData == null && effectiveData.platformBrightness != debugBrightnessOverride) {
effectiveData = effectiveData.copyWith(platformBrightness: debugBrightnessOverride);
}
return MediaQuery(
data: effectiveData,
child: widget.child,
);
}
看到这里，就可以知道，可以通过在MaterialApp外部包裹一个MediaQuery组件，同时传入新的逻辑尺寸和像素比。这是第二个需要修改的地方。
五.修改默认的逻辑尺寸和像素比
这里就直接上代码了:
class ScreenAdapterBinding extends StatelessWidget {
final double baseScreenWidth;
final Widget child;
const ScreenAdapterBinding({
super.key,
this.baseScreenWidth = 375,
required this.child
});
Widget build(BuildContext context) {
return _ScreenAdapterScope(
baseScreenWidth: baseScreenWidth,
view: View.of(context),
child: child,
);
}
}
class _ScreenAdapterScope extends StatefulWidget {
final double baseScreenWidth;
final FlutterView view;
final Widget child;
const _ScreenAdapterScope({
this.baseScreenWidth = 375,
required this.view,
required this.child,
});
State<StatefulWidget> createState() => _ScreenAdapterScopeState();
}
class _ScreenAdapterScopeState extends State<_ScreenAdapterScope> with WidgetsBindingObserver {
MediaQueryData? _parentData;
MediaQueryData? _data;
get _devicePixelRatio {
final FlutterView view = widget.view;
//物理尺寸
final Size physicalSize = view.physicalSize;
//新的像素密度
double baseWidth = widget.baseScreenWidth;
double targetPixelRatio = physicalSize.width / baseWidth;
if(targetPixelRatio == null || targetPixelRatio <= 0) {
targetPixelRatio = view.devicePixelRatio;
}
return targetPixelRatio;
}
Size get _size {
final FlutterView view = widget.view;
return view.physicalSize / _devicePixelRatio;
}
void _updateParentData() {
_parentData = MediaQuery.maybeOf(context);
_data = null; // _updateData must be called again after changing parent data.
}
void _updateData() {
WidgetsBinding.instance.renderView.configuration = ViewConfiguration(
size: _size,
devicePixelRatio: _devicePixelRatio
);
final MediaQueryData newData = MediaQueryData.fromView(widget.view, platformData: _parentData).copyWith(
size: _size,
devicePixelRatio: _devicePixelRatio,
);
if (newData != _data) {
setState(() {
_data = newData;
});
}
}
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
void didChangeDependencies() {
super.didChangeDependencies();
_updateParentData();
_updateData();
assert(_data != null);
}
void didUpdateWidget(_ScreenAdapterScope oldWidget) {
super.didUpdateWidget(oldWidget);
if (_data == null || oldWidget.view != widget.view) {
_updateParentData();
_updateData();
}
assert(_data != null);
}
void didChangeAccessibilityFeatures() {
if (_parentData == null) {
_updateData();
}
}
void didChangeMetrics() {
_updateData();
}
void didChangeTextScaleFactor() {
if (_parentData == null) {
_updateData();
}
}
void didChangePlatformBrightness() {
if (_parentData == null) {
_updateData();
}
}
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
Widget build(BuildContext context) {
MediaQueryData effectiveData = _data!;
if (!kReleaseMode && _parentData == null && effectiveData.platformBrightness != debugBrightnessOverride) {
effectiveData = effectiveData.copyWith(platformBrightness: debugBrightnessOverride);
}
return MediaQuery(
data: effectiveData,
child: widget.child,
);
}
}
使用的时候，只需要将MaterialApp使用ScreenAdapterBinding包裹即可:
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return ScreenAdapterBinding(
baseScreenWidth: 375,
child:
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
)
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
alignment: Alignment.center,
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 375,
height: 100,
color: Colors.red,
),
Container(
width: 370,
height: 100,
color: Colors.red,
margin: const EdgeInsets.only(top: 20),
)
],
),
),//
floatingActionButton: FloatingActionButton(
onPressed: () {
},
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
可以看到第一个Container，宽度为375，刚好能够铺满屏幕，第二个Container，宽度为370，没有铺满屏幕，说明默认的逻辑尺寸和像素比已经被修改为了我们自己确定的结果。但是有个问题，那就是点击事件失效了。
六.修复点击事件
这里就不绕弯了，首先看GestureBinding的initInstances方法
void initInstances() {
...
platformDispatcher.onPointerDataPacket = _handlePointerDataPacket;
}
接着看GestureBinding的_handlePointerDataPacket方法:
void _handlePointerDataPacket(ui.PointerDataPacket packet) {
// We convert pointer data to logical pixels so that e.g. the touch slop can be
// defined in a device-independent manner.
try {
_pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, platformDispatcher.implicitView!.devicePixelRatio));
if (!locked) {
_flushPointerEventQueue();
}
} catch (error, stack) {
FlutterError.reportError(FlutterErrorDetails(
exception: error,
stack: stack,
library: 'gestures library',
context: ErrorDescription('while handling a pointer data packet'),
));
}
}
可以看到，这里在计算点击的触摸坐标时，还使用的是默认的像素比去计算的，因此，这里需要把默认的像素密度替换。直接上代码:
class _ScreenAdapterScopeState extends State<_ScreenAdapterScope> with WidgetsBindingObserver {
...
final Queue<PointerEvent> _pendingPointerEvents = Queue<PointerEvent>();
void _handlePointerDataPacket(PointerDataPacket packet) {
try {
_pendingPointerEvents.addAll(PointerEventConverter.expand(packet.data, _devicePixelRatio));
if (!WidgetsBinding.instance.locked) {
_flushPointerEventQueue();
}
} catch (error, stack) {
FlutterError.reportError(FlutterErrorDetails(
exception: error,
stack: stack,
library: 'gestures library',
context: ErrorDescription('while handling a pointer data packet'),
));
}
}
void _flushPointerEventQueue() {
assert(!WidgetsBinding.instance.locked);
while (_pendingPointerEvents.isNotEmpty) {
WidgetsBinding.instance.handlePointerEvent(_pendingPointerEvents.removeFirst());
}
}
void _updateParentData() {
_parentData = MediaQuery.maybeOf(context);
_data = null; // _updateData must be called again after changing parent data.
}
void _updateData() {
WidgetsBinding.instance.renderView.configuration = ViewConfiguration(
size: _size,
devicePixelRatio: _devicePixelRatio
);
final MediaQueryData newData = MediaQueryData.fromView(widget.view, platformData: _parentData).copyWith(
size: _size,
devicePixelRatio: _devicePixelRatio,
);
WidgetsBinding.instance.platformDispatcher.onPointerDataPacket = _handlePointerDataPacket;
if (newData != _data) {
setState(() {
_data = newData;
});
}
}
...
}
完美搞定。
