颤振中的多向滚动 [英] 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，但不允许 对角线 滚动.

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，它使用ClipRect和一个Transform类型的子代.将变换矩阵(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提供了最后一个声相的速度，因此只需执行基于该速度的弹射补间即可.

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.

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

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屋！