flutter疑难杂症之记一次RenderBox测量坐标错误

75 阅读 0 评论 50 点赞

我是靠谱客的博主粗暴猫咪，最近开发中收集的这篇文章主要介绍flutter疑难杂症之记一次RenderBox测量坐标错误，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

项目中用到精确坐标计算，要求在绘制完成后立即测量控件在屏幕中的坐标，代码如下：

   void initState（）{
        ...
      WidgetsBinding.instance.addPostFrameCallback((callback) {
       _calculateAfterLayout();
     });
        ...
   }


  ///求取绘制成功的时候的x和y坐标的位置
  void _calculateAfterLayout() {
    RenderBox screenObject = _screenKey.currentContext.findRenderObject();
    final screenPosition = screenObject.localToGlobal(Offset.zero);
    _curX = screenPosition.dx;
    _curY = screenPosition.dy;
  }

代码正常情况下没有问题，但是出问题的时候是initstate中请求数据比较缓慢，然后导致计算的结果有偏差，并且在IOS和Android不同的平台上偏差还不一样，在IOS表现为dx偏差，在Android表现为dy偏差，具体如下图：

绿色的边界图形为计算而来的坐标展示的位置，它应该在中间屏幕左上角才是正常的，但是现在，这个图形在IOS表现为靠右，在Android表现为靠下。

（由于gif图不清楚，上传一张没有压缩的图片）

为什么会出现这样的情况呢，经过仔细观察可以知道，IOS的页面切换是从右往左切换，而Android的页面切换是从下往上，那么我有一个猜想，它们会不会是在切换的过程中被计算了坐标，如下：

如果是按照以上的猜想，那么就会出现测量不准确的现象。为了验证我的猜想，特将flutter中的material切换换成了自定义的切换，代码如下：

Navigator.of(context).pushAndRemoveUntil(
                PageRouteBuilder(pageBuilder: (BuildContext context,
                    Animation<double> animation,
                    Animation<double> secondaryAnimation) {
                  // 跳转的路由对象
                  return ScreenPage();
                }, transitionsBuilder: (
                  BuildContext context,
                  Animation<double> animation,
                  Animation<double> secondaryAnimation,
                  Widget child,
                ) {
                  return SlideTransition(
                    position: new Tween<Offset>(
                      begin: const Offset(0.0, 0.0),
                      end: Offset.zero,
                    ).animate(animation),
                    child: new SlideTransition(
                      position: new Tween<Offset>(
                        begin: Offset.zero,
                        end: const Offset(0.0, 0.0),
                      ).animate(secondaryAnimation),
                      child: child,
                    ),
                  );
                }),
                (route) => route == null);

果然，将路由切换改成非滑动模式，这个bug就没有出现了，如下：