Flutter手势检测器拖动开始和拖动结束长度

Question

我想构建一个应用程序刷单容器，并给出随机单词。我使用手势检测器来滑动，但我无法使其正常工作，我想滑动并获取随机单词，但滑动必须是滑动(当触摸到屏幕时会产生随机单词(。

我的想法是，如果值超过5(或-5方向无关紧要(，则取滑动的起始位置和结束位置，给出随机单词

测试只给出随机数

onPanUpdate: (details) {
setState(() {
if(swipingLength>5||swipingLenght<-5){
int randomNumber = random.nextInt(100);
num= randomNumber;
}

});

Answer 1

这里是在用户滑动时显示Word调用的代码：

import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
String txt ='';
@override
void initState() {
super.initState();
}

void displayWord() {


setState(() {
txt = 'random txt';
}); 
print('User swiped');


}

@override
Widget build(BuildContext context) {
return Stack(children: [
SwipeZone(displayWord: displayWord),
Container(child: Text('$txt'))]);
}
}
class SwipeZone extends StatefulWidget {
const SwipeZone({Key? key, required this.displayWord})
: super(key: key);
final void Function()displayWord;

@override
_SwipeZoneState createState() => _SwipeZoneState();
}
class _SwipeZoneState extends State<SwipeZone> {
double startPointX = 0;

void onPanStart(DragStartDetails details) {
startPointX = details.globalPosition.dx;

}
@override
bool _enabled = true ;
void onPanUpdate(DragUpdateDetails details) {
var x = details.globalPosition.dx;
var endPointX = x - startPointX;
if(endPointX>100){
widget.displayWord();
setState(() {
_enabled = false;
}); 

Timer(Duration(seconds: 1), ()
{setState(() {
_enabled = true;
});}); /*Make the Swipe Stop, user can swipe every 1 second*/
}
}
Widget build(BuildContext context) {
return GestureDetector(
onPanStart: onPanStart,
onPanUpdate: _enabled ? onPanUpdate: null,
child: Container(color: Colors.grey.withOpacity(0.5)),
);
}
}