颤动中的多向滚动 [英] Multidirectional scroll in flutter

问题描述

我来自 web 开发背景，并且习惯于创建一个同时具有 x 和 y 溢出的元素(允许向任何方向滚动).我正在努力使用 Flutter 实现相同的功能.

I come from a web development background, and am used to being able to create an element that has both x and y overflow (allowing scrolling in any direction). I'm struggling to achieve the same functionality with Flutter.

查看文档，我找到了 SingleChildScrollView，但它只允许 Axis.horizo​​ntal 或 Axis.vertical，而不是两者.

Looking through the documentation, I've found SingleChildScrollView, but it only allows Axis.horizontal or Axis.vertical, not both.

所以我尝试了以下方法:

So I have tried the following:

return SingleChildScrollView( // horizontal scroll widget
    scrollDirection: Axis.horizontal,
        child: SingleChildScrollView( // vertical scroll widget
            scrollDirection: Axis.vertical,
            child: ...content of the container etc...
        )
    );

这适用于 x 和 y，但它不允许 diagonal 滚动.

This works for both x and y, but it doesn't allow for diagonal scrolling.

有没有办法实现对角滚动，或者有没有更好的材料小部件，我完全错过了?

Is there a way to achieve diagonal scrolling, or is there a better material widget that I'm completely missing?

谢谢

推荐答案

我已经设法找到了一个解决方案，虽然它并不完美:

I've managed to find a solution, though it's not perfect:

我创建了一个带有 Offset _scrollOffset 的 StatefulWidget，它使用带有 Transform 类型的子元素的 ClipRect.变换矩阵(Matrix4.identity()..translate(_offset.dx, _offset.dy))被应用于变换.

I've created a StatefulWidget with an Offset _scrollOffset that uses a ClipRect with a child of type Transform. A transformation matrix (Matrix4.identity()..translate(_offset.dx, _offset.dy)) is applied to the transform.

GestureDetector 分配了一个 onPanUpdate 回调来更新滚动位置._scrollOffset += e.delta.如果滚动位置太低或太高，这可以通过设置滚动位置来限制在小部件的边界内.

A GestureDetector has an onPanUpdate callback assigned to update the scroll position. _scrollOffset += e.delta. This can be constrained to the boundaries of the widget by just setting the scroll position if it's too low or too high.

Animation 和 AnimationController 用于设置投掷速度.onPanEnd 提供最后一个平移的速度，因此只需执行一个 Tween 并根据该速度进行弹跳.

An Animation and AnimationController are used to set up fling velocity. onPanEnd provides the velocity of the last pan, so just performs a Tween with a fling based on that velocity.

动画在TapDown 上停止，因此用户可以停止滚动速度.

The animation is stopped onTapDown so the user can stop the scroll velocity.

这样做的主要问题是它不能完美地模仿 Android 或 iOS 滚动速度，尽管我正在努力尝试使用 Flutter 提供的 ScrollSimulation 类使其更好地工作.

The main problem with this is it doesn't perfectly mimmick the Android or iOS scroll velocity, though I am working on trying to get it to work better using Flutter's provided ScrollSimulation classes.

这篇关于颤动中的多向滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！