Question

我正在尝试创建一种自定义类型的滚动视图，在该视图中可以以圆周运动滚动，即，顺时针拖动将移动到列表的末尾，而逆时针拖动将移动到列表的开始。

为此，我将任务分为两个子任务。

要创建一个列表视图，以圆形（也可以是椭圆形）的方式绘制项目。
创建手势检测器以检测顺时针和逆时针力矩。

幸运的是，我已经解决了这两个问题，但是现在我无法将它们整合在一起。我创建的listview在环形轨道上移动了项目，但是它侦听了垂直拖动（从上到下和从下到上）的更改。我想将我的自定义手势检测器添加到列表视图，并按顺时针和逆时针方向滚动项目。有关here的当前解决滚动问题的视频。

这是我的GestureDetector小部件。


class OvalGestureDetector extends StatefulWidget {
  final Function(double) angleChange;
  final Widget child;

  const OvalGestureDetector({Key key, this.angleChange, this.child})
      : super(key: key);
  @override
  _OvalGestureDetectorState createState() => _OvalGestureDetectorState();
}

class _OvalGestureDetectorState extends State<OvalGestureDetector> {
  RenderBox _renderBox;
  Offset _localPositionOnPanUpdate;
  SpinVelocity _spinVelocity;
  double _height, _width;

  double difference;
  double _lastAngle = 0;

  void _moveWheel(DragUpdateDetails details) {
    if (_spinVelocity == null)
      _spinVelocity = SpinVelocity(width: _width, height: _height);
    _updateLocalPosition(details.globalPosition);
    var angle = _spinVelocity.offsetToRadians(_localPositionOnPanUpdate);
    if (difference == null) {
      difference = 0;
      _lastAngle = angle;
      return;
    }
    widget.angleChange(angle - _lastAngle);
    _lastAngle = angle;
  }

  // transforms from global coordinates to local and store the value
  void _updateLocalPosition(Offset position) {
    if (_renderBox == null) {
      _renderBox = context.findRenderObject();
    }
    _localPositionOnPanUpdate = _renderBox.globalToLocal(position);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (_, constraints) {
        _height = constraints.maxHeight;
        _width = constraints.maxWidth;
        return GestureDetector(
          onPanUpdate: _moveWheel,
          onPanStart: (detail) {
            difference = null;
          },
          child: widget.child,
        );
      },
    );
  }
}

对于圆形列表视图，我从this包中提取了圆形列表视图的代码，并对其进行了调整以创建全屏椭圆滚动视图，可以找到详细的调整后的代码here

如何将Scrollable小部件的滚动行为更改为圆形滚动？

0 个答案: