devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

05_Flutter屏幕适配

作者：IT小白 | 2024-04-23 19:32:31

赞

踩

05_Flutter屏幕适配

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

  • 1

从而确定新的逻辑尺寸为:

新的逻辑尺寸 = 默认的逻辑尺寸 / 新的像素比

  • 1
三.默认的逻辑尺寸和像素比的确定过程

那么接下来的问题就是怎么将Flutter默认的逻辑尺寸和像素比修改为新的逻辑尺寸和像素比了，查看源码可以知道，runApp时首先会示例化一个WidgetsFlutterBinding的单例对象。

void runApp(Widget app) {
  final WidgetsBinding binding = WidgetsFlutterBinding.ensureInitialized();
  assert(binding.debugCheckZone('runApp'));
  binding
    ..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))
    ..scheduleWarmUpFrame();
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

也就是通过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;
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

而WidgetsFlutterBinding是继承了BindingBase的，因此WidgetsFlutterBinding示例化的同时，会调用BindingBase的构造方法，接着看BindingBase的构造方法:

BindingBase() {
  ...
  initInstances();
  ...
}

  • 1
  • 2
  • 3
  • 4
  • 5

BindingBase的构造方法中，会调用initInstances()，initInstances()调用的同时，会调用RendererBinding的initInstances()方法，接着看RendererBinding的initInstances方法:

@override
void initInstances() {
  super.initInstances();
  ...
  initRenderView();
  ...
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

RendererBinding的initInstances方法中，会调用initRenderView方法，接着看RendererBinding的initRenderView方法:

void initRenderView() {
	...
	renderView = RenderView(configuration: createViewConfiguration(), view: platformDispatcher.implicitView!);
	...
}

  • 1
  • 2
  • 3
  • 4
  • 5

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,
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

可以看到，ViewConfiguration对象的创建过程，会传递默认的像素比，以及确定默认的逻辑尺寸，这里就是我们第一个需要修改的地方，那么怎么修改，毫无疑问，需要把RendererBinding的renderView的值替换成我们自己创建的，这样我们就可以根据自己计算的逻辑尺寸和像素比去创建ViewConfiguration了。

四.MediaQuery的确定过程

回到runApp的源码:

void runApp(Widget app) {
  ...
  binding
    ..scheduleAttachRootWidget(binding.wrapWithDefaultView(app))
  ...
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

WidgetsFlutterBinding示例化完成后，会通过WidgetsFlutterBinding的wrapWithDefaultView方法包装MaterialApp。接着看WidgetsFlutterBinding的wrapWithDefaultView方法:

Widget wrapWithDefaultView(Widget rootWidget) {
  return View(
    view: platformDispatcher.implicitView!,
    child: rootWidget,
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

可以看到，这里使用了View包装MaterialApp，那么接着看View的build方法:

@override
Widget build(BuildContext context) {
  return _ViewScope(
    view: view,
    child: MediaQuery.fromView(
    	view: view,
    	child: child,
    ),
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

MediaQuery的build过程:

@override
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,
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

看到这里，就可以知道，可以通过在MaterialApp外部包裹一个MediaQuery组件，同时传入新的逻辑尺寸和像素比。这是第二个需要修改的地方。

五.修改默认的逻辑尺寸和像素比

这里就直接上代码了:

class ScreenAdapterBinding extends StatelessWidget {

  final double baseScreenWidth;
  final Widget child;

  const ScreenAdapterBinding({
    super.key,
    this.baseScreenWidth = 375,
    required this.child
  });

  @override
  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,
  });

  @override
  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;
      });
    }
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _updateParentData();
    _updateData();
    assert(_data != null);
  }

  @override
  void didUpdateWidget(_ScreenAdapterScope oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (_data == null || oldWidget.view != widget.view) {
      _updateParentData();
      _updateData();
    }
    assert(_data != null);
  }

  @override
  void didChangeAccessibilityFeatures() {
    if (_parentData == null) {
      _updateData();
    }
  }

  @override
  void didChangeMetrics() {
    _updateData();
  }

  @override
  void didChangeTextScaleFactor() {
    if (_parentData == null) {
      _updateData();
    }
  }

  @override
  void didChangePlatformBrightness() {
    if (_parentData == null) {
      _updateData();
    }
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  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,
    );
  }

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158

使用的时候，只需要将MaterialApp使用ScreenAdapterBinding包裹即可:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  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;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  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.
    );
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65

在这里插入图片描述

可以看到第一个Container，宽度为375，刚好能够铺满屏幕，第二个Container，宽度为370，没有铺满屏幕，说明默认的逻辑尺寸和像素比已经被修改为了我们自己确定的结果。但是有个问题，那就是点击事件失效了。

六.修复点击事件

这里就不绕弯了，首先看GestureBinding的initInstances方法

@override
void initInstances() {
  ...
  platformDispatcher.onPointerDataPacket = _handlePointerDataPacket;
}

  • 1
  • 2
  • 3
  • 4
  • 5

接着看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'),
      ));
    }
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

可以看到，这里在计算点击的触摸坐标时，还使用的是默认的像素比去计算的，因此，这里需要把默认的像素密度替换。直接上代码:

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;
      });
    }
  }

  ...

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58

在这里插入图片描述

完美搞定。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/475686
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号