我有一个WebView
水平滚动里面的垂直滚动PageView
。像这样:
PageView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return WebView(
initialUrl: 'https://flutter.dev/docs',
gestureRecognizers: [
Factory(() => VerticalDragGestureRecognizer()),
].toSet(),
);
},
);
在Flutter(1.5.4)的先前稳定版本中,此操作按预期工作-垂直滚动将在WebView中移动内容,水平滚动将在PageView中移动。
升级到Flutter后,此操作中断了v1.7.8+hotfix.3
。现在,即使手势几乎完全是垂直的,水平滚动似乎总是可以取胜的。如果页面完全垂直滚动,则仅在手势停止之后(即,当我在手势之后停止触摸屏幕时)-在手势进行时不会进行垂直滚动。
添加和删除VerticalDragGestureRecognizer
从gestureRecognizers
没有任何效果现在-
无论哪种方式,程序,工作起来就像识别器不在名单上(尽管这并不是说gestureRecognizers
完全忽略,因为加入EagerGestureRecognizer
确实有效果)。
这是手势竞技场的调试输出(请记住,我试图使手势尽可能保持垂直,但是即使HorizontalDragGestureRecognizer
我也垂直移动了手势,即使向两侧轻微的手指移动也足以赢得胜利。全部时间):
I/flutter (30125): Gesture arena 14 ❙ ★ Opening new gesture arena.
I/flutter (30125): Gesture arena 14 ❙ Adding: Instance of '_CombiningGestureArenaMember'
I/flutter (30125): Gesture arena 14 ❙ Adding: LongPressGestureRecognizer#9cad1(debugOwner: GestureDetector, state: ready)
I/flutter (30125): Gesture arena 14 ❙ Adding: HorizontalDragGestureRecognizer#69b8f(start behavior: start)
I/flutter (30125): Gesture arena 14 ❙ Closing with 3 members.
I/flutter (30125): Gesture arena 14 ❙ Rejecting: LongPressGestureRecognizer#9cad1(debugOwner: GestureDetector, state: possible)
I/flutter (30125): Gesture arena 14 ❙ Accepting: HorizontalDragGestureRecognizer#69b8f(start behavior: start)
I/flutter (30125): Gesture arena 14 ❙ Self-declared winner: HorizontalDragGestureRecognizer#69b8f(start behavior: start)
这就是当您在拖动手势进行时设法保持手势完全垂直(似乎在使用鼠标的模拟器上更容易)时发生的情况:
flutter: Gesture arena 30 ❙ ★ Opening new gesture arena.
flutter: Gesture arena 30 ❙ Adding: Instance of '_CombiningGestureArenaMember'
flutter: Gesture arena 30 ❙ Adding: HorizontalDragGestureRecognizer#11e7f(start behavior: down)
flutter: Gesture arena 30 ❙ Closing with 2 members.
即使是轻微的垂直移动也可以使HorizontalDragGestureRecognizer
宣布获胜,但是VerticalDragGestureRecognizer
(似乎包裹在中_CombiningGestureArenaMember
)永远不会取得胜利。这似乎在事实上被完全忽略-
手势舞台输出,VerticalDragGestureRecognizer
在gestureRecognizers
没有它是完全一致的。
这可能是Flutter中的错误,因此我还在Flutter的GitHub上创建了一个问题。但是,无论哪种方式-
我如何在当前版本的Flutter中达到这种效果?任何解决方法或规范解决方案将不胜感激。
竞技场的规则似乎已经改变。现在,竞技场宣布具有主动接收器的手势将获胜。确实,这甚至可以进一步增加手势的响应速度。但是,由于本机视图不声明手势,仅当没有其他活动的检测器/接收器声明手势时才使用手势,因此我怀疑垂直拖动甚至不会从WebView作为手势进入竞技场。这就是为什么任何轻微的水平拖动都会导致水平拖动手势获胜的原因-
因为根本没有其他小部件可以要求任何手势。
您可以扩展VerticalDragGestureRecognizer
,使其接受手势:
class PlatformViewVerticalGestureRecognizer
extends VerticalDragGestureRecognizer {
PlatformViewVerticalGestureRecognizer({PointerDeviceKind kind})
: super(kind: kind);
Offset _dragDistance = Offset.zero;
@override
void addPointer(PointerEvent event) {
startTrackingPointer(event.pointer);
}
@override
void handleEvent(PointerEvent event) {
_dragDistance = _dragDistance + event.delta;
if (event is PointerMoveEvent) {
final double dy = _dragDistance.dy.abs();
final double dx = _dragDistance.dx.abs();
if (dy > dx && dy > kTouchSlop) {
// vertical drag - accept
resolve(GestureDisposition.accepted);
_dragDistance = Offset.zero;
} else if (dx > kTouchSlop && dx > dy) {
// horizontal drag - stop tracking
stopTrackingPointer(event.pointer);
_dragDistance = Offset.zero;
}
}
}
@override
String get debugDescription => 'horizontal drag (platform view)';
@override
void didStopTrackingLastPointer(int pointer) {}
}
之后,您可以在中使用新类gestureRecognizers
:
PageView.builder(
itemCount: 5,
itemBuilder: (context, index) {
return WebView(
initialUrl: 'https://flutter.dev/docs',
gestureRecognizers: [
Factory(() => PlatformViewVerticalGestureRecognizer()),
].toSet(),
);
},
);
问题内容: 我正在尝试创建一系列只能水平滚动的照片。 它应该看起来像这样的 但是,只有通过指定包含照片的的宽度,才能实现上述目的(因此它们不会“自动换行”)。如果我不放宽- 看起来像这样; 使用CSS可以防止固定宽度的图像发生变化,该怎么办。 谢谢 问题答案: 您可以使用与。这样写:
问题内容: 我在WkWebview中有一个网页,并且该网页中有我想放置播放现场电影的UIView的矩形区域。我已经制作了webview和uiview,但是我不知道如何确定uiview在rect区域中的位置。也就是说,当用户滚动Web视图时,uiview滚动也会滚动。看来uiview是网页的一部分。如何将uiview固定到webview中的网页? 谢谢你的帮助。 问题答案: 最后,我通过使用java
问题内容: 我只想在Webview中进行垂直滚动,而不希望进行水平滚动。 这帮助我解决了滚动问题。 但是使用它使我的webview看起来很奇怪。所有编辑文本的高度都被压缩(垂直),并且看起来很差。 还有什么其他方法可以从客户端禁用水平滚动? 使用SINGLE_COLUMN如何避免webview高度变化的问题?我希望垂直外观与没有SINGLE_COLUMN时的外观相同 问题答案: 这是一种hack,
我想要中心的div水平与一个选项滚动使用CSS。我怎样才能做到呢?我看到了一个解决方案使用边距自动和最大宽度,但div将被削减,所以我没有这样做。 null null
我在一个容器里有一张基本的桌子。该表将有大约25列。我正在尝试添加一个水平滚动条溢出的表,并有一个真正困难的时间。 现在发生的是,表格单元格通过自动调整单元格的高度和保持固定的表格宽度来容纳单元格的内容。 我感谢任何关于为什么我的方法不能解决这个问题的建议。 提前多谢! CSS HTML JS fiddle(注:如果可能,我希望水平滚动条在带有红色边框的容器中):http://jsfiddle.n
问题内容: 我有一个,当行太多时,会出现滚动条,但是当行太长时,该行会分成两行,而不是出现水平滚动条,如何使水平条出现而不是分成两行,我的添加如下: 问题答案: 正如我们自己的Rob Camick 在这里介绍的那样,您可以尝试使用类似… 这将停止行/自动换行
请看http://codepen.io/anon/pen/zGLZoR 我的“浮动div”跟随页面滚动-它在向下移动滚动条后立即执行此操作。如何仅在达到px(比如200px)滚动高度时启动浮动。因此,当您向下滚动200px时,可以看到浮动div,而不是直接看到。 编辑: 当滚动回到顶部时,div必须返回到原始位置-超过200px标记
我正在咨询你,因为我正在处理一些关于VSCODE的困扰我的事情。 我们目前正在创建一个应用程序,它应该在本地运行,所以我们的代码中确实有很多base64行。可以想象,这些字符串相当大: 这对我(和我的同事)来说是个问题,因为我们对这种轻量级的“Visual Studio”式编辑器很感兴趣,但又无法避免出现断行,这使得导航某些脚本非常复杂。