Flutter答题APP开发求助：实现按钮跳转+超时自动返回功能

核心逻辑 #

• 主页面设置多个跳转按钮，点击后通过Navigator.push进入答题页面
• 答题页面初始化时启动计时器，计时结束后调用Navigator.pop自动返回主页面

代码实现 #

1. 主页面（多按钮跳转） #

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '答题APP',
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('答题选择')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const QuizPage(
                      quizTitle: '数学答题',
                      duration: 10,
                    ),
                  ),
                );
              },
              child: const Text('数学答题'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const QuizPage(
                      quizTitle: '英语答题',
                      duration: 15,
                    ),
                  ),
                );
              },
              child: const Text('英语答题'),
            ),
            // 可继续添加更多题型按钮
          ],
        ),
      ),
    );
  }
}

2. 答题页面（计时自动返回） #

创建quiz_page.dart文件：

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

class QuizPage extends StatefulWidget {
  final String quizTitle;
  final int duration; // 计时时长（单位：秒）

  const QuizPage({
    super.key,
    required this.quizTitle,
    required this.duration,
  });

  @override
  State<QuizPage> createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  late Timer _timer;
  int _remainingTime = 0;

  @override
  void initState() {
    super.initState();
    _remainingTime = widget.duration;
    _startTimer();
  }

  void _startTimer() {
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _remainingTime--;
      });
      if (_remainingTime <= 0) {
        _timer.cancel();
        // 计时结束自动返回主页面
        Navigator.pop(context);
        // 可选：弹出时间到提示
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('时间到，已返回首页')),
        );
      }
    });
  }

  @override
  void dispose() {
    _timer.cancel(); // 页面销毁时取消计时器，避免内存泄漏
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.quizTitle),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 16),
            child: Text('剩余时间：$_remainingTime秒'),
          ),
        ],
      ),
      body: const Center(
        child: Text('答题内容区域（可替换为实际题目UI）'),
      ),
    );
  }
}

关键注意事项 #

• 必须在dispose方法中取消计时器，防止页面销毁后计时器持续运行造成内存泄漏
• 可通过传递参数实现不同题型的差异化计时时长
• 自动返回时的提示可根据需求调整或移除

内容的提问来源于stack exchange，提问作者Shakil Ahammed