长按但在 Flutter 延迟后增加计数器更快

Question

我实现了下面的代码，

GestureDetector(
                onTap: increaseAge,

                onTapDown: (TapDownDetails details) {
                  timer = Timer.periodic(Duration(milliseconds: 50), (timer) {
                     increaseAge() 
                  });
                },

                onTapUp: (TapUpDetails details) {
                  timer!.cancel();
                },

                onTapCancel: () {
                  timer!.cancel();
                },
),


//here is the increaseAge function
void increaseAge() {
    setState(() {
      age++;
    });
}

我想要的是当用户点击时，值增加并更新 UI。但是当用户按住按钮时，该值会持续增加，但会在短暂的延迟后增加用户体验。

Answer 1

试试这个

onLongPressStart: () {
                  //seconds: 2 = short delay
                  Future.delayed(Duration(seconds: 2), () {
                    timer = Timer.periodic(
                        //milliseconds: 500 = increase speed
                        Duration(milliseconds: 500), (Timer t) => increaseAge());
                  });
                }

onLongPressEnd: () {
                  timer!.cancel();
                }

Answer 2

试试下面的代码。目前，如果用户在长按超过特定距离时移动手指，它会取消。您可以在 onLongPressMoveUpdate 中使用 LongPressMoveUpdateDetails、see here.

对其进行微调

import 'package:flutter/material.dart';
import 'dart:async';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _age = 1;

  Timer? _timer;
  bool _longPressCanceled = false;

  void _increaseAge() {
    setState(() {
      _age++;
    });
  }

  void _cancelIncrease() {
    if (_timer != null) {
      _timer!.cancel();
    }
    _longPressCanceled = true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      body: Column(
        children: [
          Text(_age.toString()),
          GestureDetector(
            child: Container(
                padding: EdgeInsets.all(20),
                color: Colors.lightBlue,
                child: Center(child: Text('Press or long press here'))),
            onTap: _increaseAge,
            onLongPressEnd: (LongPressEndDetails longPressEndDetails) {
              _cancelIncrease();
            },
            onLongPress: () {
              _longPressCanceled = false;
              Future.delayed(Duration(milliseconds: 300), () {
                if (!_longPressCanceled) {
                  _timer = Timer.periodic(Duration(milliseconds: 150), (timer) {
                    _increaseAge();
                  });
                }
              });
            },
            onLongPressUp: () {
              _cancelIncrease();
            },
            onLongPressMoveUpdate:
                (LongPressMoveUpdateDetails longPressMoveUpdateDetails) {
              if (longPressMoveUpdateDetails.localOffsetFromOrigin.distance >
                  20) {
                _cancelIncrease();
              }
            },
          )
        ],
      ),
    );
  }
}

长按但在 Flutter 延迟后增加计数器更快

Increase counter faster when long pressed but after a delay in Flutter

counter

gesture

flutter