gestredetector onHorizontalDragUpdate重复调用问题

Question

我正在使用gestredetector来捕获抖动中的右滑动，当检测到手指从左到右切换的手势时，退出页面。这是flutter版本信息:

$ ~/apps/flutter/bin/flutter --version
Flutter 1.22.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 9b2d32b605 (5 weeks ago) • 2021-01-22 14:36:39 -0800
Engine • revision 2f0af37152
Tools • Dart 2.10.5
(base)

这是我现在使用的代码:

return GestureDetector(
onHorizontalDragStart: _onHorizontalDragStart,
onHorizontalDragUpdate: _onHorizontalDragUpdate,
onHorizontalDragEnd: _onHorizontalDragEnd,
child: Container()
)

这是处理手指位置的函数:

Offset _initialSwipeOffset;
Offset _finalSwipeOffset;
void _onHorizontalDragStart(DragStartDetails details) {
_initialSwipeOffset = details.globalPosition;
}
void _onHorizontalDragUpdate(DragUpdateDetails details) {
_finalSwipeOffset = details.globalPosition;
}
void _onHorizontalDragEnd(DragEndDetails details) {
if (_initialSwipeOffset != null) {
final offsetDifference = _initialSwipeOffset.dx - _finalSwipeOffset.dx;
if (offsetDifference < 0) {
Navigator.pop(context);
}
}
}

但是当我在屏幕上从左到右切换手指时。onHorizontalDragUpdate函数调用多次，运行_onHorizontalDragEnd函数时，_initialSwipeOffset为空。这是我的页面的完整代码:

return GestureDetector(
onHorizontalDragStart: _onHorizontalDragStart,
onHorizontalDragUpdate: _onHorizontalDragUpdate,
onHorizontalDragEnd: _onHorizontalDragEnd,
child: Container(
constraints: BoxConstraints(
minHeight: MediaQuery.of(context).size.height * 0.9,
),
color: Theme.of(context).scaffoldBackgroundColor,
child: Padding(
padding: const EdgeInsets.all(
16.0,
),
child: SizedBox(
height: 500.0,
child: CustomScrollView(slivers: <Widget>[
SliverToBoxAdapter(
child: InkWell(
onTap: () => {},
child: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Container(
child: Text(
item.subName == "" ? "Comment" : item.subName,
style: Theme.of(context).textTheme.headline5.copyWith(
fontWeight: FontWeight.w600,
),
),
),
),
)),
if (item.isFav == 1)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8.0, right: 1),
child: ButtonTheme(
minWidth: 50,
height: 30.0,
child: RaisedButton.icon(
color: Theme.of(context).primaryColor,
icon: Icon(
Feather.check_circle,
size: 16,
color: Theme.of(context).canvasColor,
),
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(5.0)),
onPressed: () => touchSub(item.id.toString(), SubStatus.UNSUB),
label: Text("已订阅"),
)),
)),
if (item.isFav != 1)
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8.0, right: 1),
child: ButtonTheme(
minWidth: 50,
height: 30.0,
child: RaisedButton(
color: Theme.of(context).primaryColor,
shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(5.0)),
onPressed: () => touchSub(item.id.toString(), SubStatus.SUB),
child: Text("订阅"),
)),
)),
SliverToBoxAdapter(
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => ProfilePage(username: item.author)),
);
},
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(
text: item.author,
style: Theme.of(context).textTheme.caption.copyWith(
color: Theme.of(context).primaryColor,
),
),
],
),
),
)),
if (item.content != "")
SliverToBoxAdapter(
child: Html(
data: item.content,
style: {
"body": Style(
fontSize: FontSize(19.0),
),
},
onLinkTap: (url) => CommonUtils.launchUrl(url),
)),
SliverPadding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
sliver: viewService.buildComponent("articlelist"),
)
]),
),
),
));

问题在哪里，我应该做些什么来解决它?

Answer 1

CustomSrollView实际上是在窃取触摸。我会给你一个解决办法的。

1。扩展HorizontalDragGestureRecognizer

class AllowMultipleHorizontalDragGestureRecognizer
extends HorizontalDragGestureRecognizer {
@override
void rejectGesture(int pointer) {
acceptGesture(pointer);
}
}

2。使用RawGestureDetector

RawGestureDetector(
gestures: {
AllowMultipleHorizontalDragGestureRecognizer:
GestureRecognizerFactoryWithHandlers<
AllowMultipleHorizontalDragGestureRecognizer>(
() => AllowMultipleHorizontalDragGestureRecognizer(),
(AllowMultipleHorizontalDragGestureRecognizer instance) {
instance.onStart = _onHorizontalDragStart;
instance.onUpdate = _onHorizontalDragUpdate;
instance.onEnd = _onHorizontalDragEnd;
},
)
},
child: ....,

如果你使用empty container作为测试，给它添加一些颜色Container(color: Colors.transparent)