双击返回怎么实现呢?

来源：16-1 课程总结

慕粉1044104991

2021-12-11

老师,我在main.dart设置双击返回后,如果在video_detail页面也会提示双击返回,这种该怎么解决呢

写回答

2回答

CrazyCodeBoy

2025-01-08

在 Flutter 中，你可以通过监听返回按钮事件来实现双击返回的效果，以下是一个简单的实现方法：

实现步骤

1. 记录点击时间：需要记录用户点击返回按钮的时间。

2. 判断间隔时间：判断两次点击返回按钮的时间间隔是否小于设定的时间（如 2 秒）。

3. 退出应用或提示：如果间隔时间小于设定的时间，则退出应用；否则提示用户再按一次退出。

以下是代码实现：

import 'package:flutter/material.dart';

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

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

@override
Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
}
}

class HomePage extends StatefulWidget {
@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
// 用于记录上次点击返回按钮的时间
DateTime? _lastPressedTime;

@override
Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 获取当前时间
        DateTime now = DateTime.now();
        // 判断是否在2秒内双击
        if (_lastPressedTime == null ||
            now.difference(_lastPressedTime!) > const Duration(seconds: 2)) {
          // 提示用户再次点击退出
          _lastPressedTime = now;
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("再按一次退出应用")),
          );
          return false; // 不退出
        }
        return true; // 退出应用
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text("双击返回示例"),
        ),
        body: const Center(
          child: Text("双击返回按钮退出应用"),
        ),
      ),
    );
}
}

代码解释

1. WillPopScope：

WillPopScope 是 Flutter 提供的一个 Widget，用于拦截系统返回按钮事件。

通过其 onWillPop 属性，可以处理返回按钮的点击事件。

2. DateTime 比较：

使用 DateTime.now() 获取当前时间。

通过 difference 方法计算两次点击的时间间隔。

3. ScaffoldMessenger：

用于显示一个提示用户的 SnackBar，比如“再按一次退出应用”。

4. 返回值：

onWillPop 返回 false，表示不退出应用。

返回 true，则退出应用。

效果

1. 用户首次点击返回按钮时，会显示提示消息“再按一次退出应用”。

2. 如果用户在 2 秒内再次点击返回按钮，应用将退出；否则，提示信息会重新出现。

可选优化

自定义时间间隔：可以通过调整 Duration(seconds: 2) 来更改双击间隔时间。

提示美化：可以使用更美观的提示方式，例如自定义 Toast。