如何在 Flutter 中将 PageView 返回到其初始 state

Question

我正在制作一个测验应用程序，起初一切正常，但是当我第一次做测验时，它会完美地检查正确或错误的答案。

但是当我 go 回到测验而不重新启动应用程序只是从一个页面导航到另一个页面时，PageView 不会再次重置其 state。

在参加测验之前，请在此处输入图像描述

在我做完测验并且我想在不重新启动应用程序的情况下再次做测验后，我得到了检查的答案。

在此处输入图像描述

如何在不重新启动应用程序的情况下将 PageView 返回到其初始 state

这是我的代码：

 import 'package:flutter/material.dart'; import 'package:quizapp/src/models/quiz_model.dart'; import 'package:quizapp/src/screens/result_screen.dart'; class QuizScreen extends StatefulWidget { const QuizScreen({Key? key}): super(key: key); @override State<QuizScreen> createState() => _QuizScreenState(); } class _QuizScreenState extends State<QuizScreen> { int _questionNumber = 1; late PageController _controller; int _score = 0; @override void initState() { _controller = PageController(initialPage: 0); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: Column( children: [ Expanded( child: Container( padding: const EdgeInsets.symmetric(horizontal: 12), child: PageView.builder( physics: const NeverScrollableScrollPhysics(), controller: _controller, itemCount: questions.length, itemBuilder: (context, index) { final _question = questions[index]; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const SizedBox( height: 16, ), Text( _question.text, style: const TextStyle(fontSize: 22), ), const SizedBox( height: 16, ), Expanded( child: SingleChildScrollView( child: Column( children: _question.options.map((option) => GestureDetector( onTap: () { Future.delayed( const Duration(milliseconds: 250), () { if (_questionNumber < questions.length) { _controller.nextPage( duration: const Duration( milliseconds: 250), curve: Curves.easeInExpo); setState(() { if (option.isCorrect == true) { _score++; } }); setState(() { _questionNumber++; // _isLocked = false; }); } else { Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) => ResultScreen( score: _score), )); } }); if (_question.isLocked) { return; } else { setState(() { _question.isLocked = true; _question.selectedOption = option; }); } }, child: Container( height: 50, padding: const EdgeInsets.all(12), margin: const EdgeInsets.symmetric( vertical: 8), decoration: BoxDecoration( color: const Color(0xFF6949FD), borderRadius: BorderRadius.circular(16), border: Border.all( color: getColorForOption( option, _question))), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Text( option.text, style: const TextStyle( fontSize: 18, color: Colors.white), ), const SizedBox(width: 10), getIconForOption(option, _question) ], ), ), )).toList(), ))) ]); }, )), ), ], ), )); } Color getColorForOption(Option option, Question _question) { final isSelected = option == _question.selectedOption; if (_question.isLocked) { if (isSelected) { return option.isCorrect? Colors.green: Colors.red; } else if (option.isCorrect) { return Colors.green; } } return const Color(0xFF6949FD); } Widget getIconForOption(Option option, Question _question) { final isSelected = option == _question.selectedOption; if (_question.isLocked) { if (isSelected) { return option.isCorrect? const Icon(Icons.check_circle, color: Colors.green): const Icon(Icons.cancel, color: Colors.red); } else if (option.isCorrect) { return const Icon(Icons.check_circle, color: Colors.green); } } return const SizedBox.shrink(); } }

Answer 1

更简单的方法是在 go 返回或按下按钮时重新启动应用程序。 您可以用WillPopScope()包裹Scaffold()以在您返回时重新启动。 您可以使用此package 重新启动。 如果您需要保存乐谱，可以将其保存在本地存储中。 另一个简单的 package 是get_storage 。

dependencies:
flutter_phoenix: ^1.1.0

runApp(Phoenix(child: const MyApp()));

WillPopScope(
  onWillPop: () async {
    Phoenix.rebirth(context);
  },
  child: Scaffold())