Flutter 颤振UI带捕捉的对角滚动

我正在尝试创建一个像视频中那样的小部件，使用快照选项向各个方向滚动

到现在为止我一直在努力

 Widget build(BuildContext context) {
    return InteractiveViewer(
      constrained: false,
      transformationController: _transformController,
      onInteractionStart: _onPanStarted,
      onInteractionUpdate: _onPanUpdated,
      onInteractionEnd: _onPanEnd,
      scaleEnabled: false,
      panEnabled: true,
      child: _buildGrid(),
    );
  }

而构建函数是

 Widget _buildGrid() {
   
    Table _table = Table(
      defaultColumnWidth: FixedColumnWidth(_cardWidth),
      children: List.generate(
        _rows.length,
        (x) => _rows[x],
      ),
    );

    return _table;
  }

拖动结束时的捕捉功能

_snapTo({bool animate = true}) {
    if (_animationController.isAnimating) {
      _animationController.stop();
    }
    // moving to
    var xDistance =
        _currentOffset.getTranslation().x - _oldOffset.getTranslation().x;
    var yDistance =
        _currentOffset.getTranslation().y - _oldOffset.getTranslation().y;

    if (xDistance > 20) {
      _currentCol--;
      _direction = Direction.LEFT;
    } else if (xDistance < -20) {
      _currentCol++;
      _direction = Direction.RIGHT;
    }
    if (yDistance > 30) {
      _currentRow--;
      if (_direction == Direction.RIGHT) {
        _direction = Direction.TOP_RIGHT;
      } else if (_direction == Direction.LEFT) {
        _direction = Direction.TOP_LEFT;
      } else {
        _direction = Direction.TOP;
      }
    } else if (yDistance < -30) {
      _currentRow++;
      if (_direction == Direction.RIGHT) {
        _direction = Direction.DOWN_RIGHT;
      } else if (_direction == Direction.LEFT) {
        _direction = Direction.DOWN_LEFT;
      } else {
        _direction = Direction.DOWN;
      }
    }

    print("$_currentCol,$_currentRow");
    log("${xDistance.toInt()},${yDistance.toInt()}");
    // Getting x,y to move to

    var dx = (_currentCol * _cardWidth) - ((Get.width - _cardWidth) / 2);
    var dy = (_currentRow * _cardHeight) - ((Get.height - _cardHeight) / 2);

    var matrix = Matrix4.translationValues(-dx, -dy, 0);

    _animation = Matrix4Tween(begin: _currentOffset, end: matrix).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.linear,
      ),
    );

    if (_currentOffset == matrix) return;
    if (animate) {
      _animationController.forward(from: 0);
    } else {
      setState(() {
        _transformController.value = matrix;
      });
    }

    // ..reset();
    // ..animateTo(1);

    _oldOffset = matrix;
    // setState(() {});
    // _animationController.reset();
  }

\u snapTo（{bool animate=true}）{
如果（_animationController.isAnimating）{
_animationController.stop（）；
}
//移动到
变距=
_currentOffset.getTranslation（）.x-_oldOffset.getTranslation（）.x；
变距=
_currentOffset.getTranslation（）.y-_oldOffset.getTranslation（）.y；
如果（xDistance>20）{
_当前列--；
_方向=方向。左；
}否则如果（xDistance<-20）{
_currentCol++；
_方向=direction.RIGHT；
}
如果（Y距离>30）{
_当前行--；
如果（_direction==direction.RIGHT）{
_方向=方向。右上方；
}else if（_direction==direction.LEFT）{
_方向=方向。左上方；
}否则{
_方向=方向.TOP；
}
}否则如果（Y距离<-30）{
_currentRow++；
如果（_direction==direction.RIGHT）{
_方向=方向。向下\向右；
}else if（_direction==direction.LEFT）{
_方向=方向向下\左；
}否则{
_方向=方向。向下；
}
}
打印（$当前列，$当前行）；
日志（${xDistance.toInt（）}，${yDistance.toInt（）}）；
//让x，y移动到
var dx=（（当前列*_cardWidth）-（Get.width-_cardWidth）/2）；
变量dy=（（当前行*_卡片高度）-（Get.height-_卡片高度）/2）；
var矩阵=矩阵4.转换值（-dx，-dy，0）；
_动画=矩阵x4tween（开始：\当前偏移，结束：矩阵）。动画(
曲线化(
父项：_animationController，
曲线：曲线。线性，
),
);
if（_currentOffset==矩阵）返回；
如果（动画）{
_animationController.forward（从：0开始）；
}否则{
设置状态（）{
_transformController.value=矩阵；
});
}
//..重置（）；
//..animateTo（1）；
_oldOffset=矩阵；
//setState（（）{}）；
//_animationController.reset（）；
}

---

如果您有任何建议，我们将不胜感激。

我尝试过，但对我不满意，谢谢。我尝试过，但对我不满意，谢谢