05_Flutter屏幕适配

andr_gale

于 2024-04-19 19:14:49 发布

阅读量1.1k

点赞数 14

分类专栏：重学Flutter 文章标签： flutter android 移动开发

本文链接：https://blog.csdn.net/gzx110304/article/details/137975032

版权

重学Flutter 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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方法:

@override
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方法:

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

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

看到这里，就可以知道，可以通过在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,
    );
  }

}

使用的时候，只需要将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.
    );
  }
}

在这里插入图片描述

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

六.修复点击事件

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

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

  ...

}

在这里插入图片描述

完美搞定。

andr_gale

关注

14
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
05_Flutter屏幕适配

可以看到，ViewConfiguration对象的创建过程，会传递默认的像素比，以及确定默认的逻辑尺寸，这里就是我们第一个需要修改的地方，那么怎么修改，毫无疑问，需要把RendererBinding的renderView的值替换成我们自己创建的，这样我们就可以根据自己计算的逻辑尺寸和像素比去创建ViewConfiguration了。可以看到，这里在计算点击的触摸坐标时，还使用的是默认的像素比去计算的，因此，这里需要把默认的像素密度替换。因此，我们需要修改默认的逻辑尺寸，将逻辑宽度统一成375。
复制链接

扫一扫