dart 如何重建一个小部件每次到达顶部的路线？

我有3个小部件A，B，C从A我推B和设置a .然后打印调试消息如果我返回到A（从B）的.然后火灾和消息被打印，但如果从B我推一个替换C，然后返回到A，.然后不火所以所有重建一个小部件每次用户返回到它
内容：在我的测验应用程序，我有一个主屏幕上的按钮，应该只显示，如果用户是在测验（如果他们开始了测验，而不是完成，因为数据保存在设备上），一个恢复按钮，但不仅是恢复按钮应该只显示，如果用户是在测验，但它应该显示一些测验统计数据，如什么学科和所有许多问题等...
所以我需要在用户每次返回时重建主屏幕
我尝试过的：
江荚：尽管我不喜欢这种情况下的解决方案，因为设置一个riverpod的状态意味着我必须同时设置另一整套数据，而且不仅这些数据是扩展的，（一个问题列表，用户当前的问题是什么，用户给出的答案是什么等等）但我也已经保存了测验和平的和平，一个整数在这里当用户去到下一个问题，当用户选择一个答案时，整数上有.但即使尝试使用Riverpod，当返回主屏幕时，主屏幕仍然有过时的信息，因为Riverpod只更新可见的小部件。
navigatorObserver：我尝试使用观察者didPop didPush来检查当前路由是否在顶部，如果是，则调用一个函数，但我甚至无法通过检查部分。

我使用了一个RouteObserver和一个实现RouteAware的mixin来实现我的目标。
如何做：首先我们需要示例化一个观察者，在我的例子中我使用了一个全局变量。

final routeObserver = RouteObserver<PageRoute>();

字符串
然后传给了MaterialApp中的navigatorObservers。

Widget build(BuildContext context) {
    return MaterialApp(
      (...)
      home: const MyHomePage(),
      navigatorObservers: [routeObserver],
    );
  }

型
有了这个，我创建了一个mixin，它扩展了State（所以我可以使用 context），实现了RouteAware（所以我可以使用它的功能）

mixin RouteAwareMixin<T extends StatefulWidget> on State<T>
    implements RouteAware {(...)}

型
然后我覆盖RouteAware函数以调用函数onActivate和onDeactivate（在下一步中详细介绍）

@override
  void didChangeDependencies() {
    routeObserver.subscribe(this, ModalRoute.of(context)! as PageRoute);
    super.didChangeDependencies();
  }
  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }
  @override
  void didPopNext() {
    onActivate();
  }
  @override
  void didPush() {
    onActivate();
  }
  @override
  void didPop() {
    onDeactivate();
  }
  @override
  void didPushNext() {
    onDeactivate();
  }

型
在这个mixin上，我创建了两个函数，稍后将被使用这个mixin的类覆盖，一个函数用于激活小部件时（小部件获取或重定向到堆栈顶部），另一个函数用于小部件被停用时（从堆栈中弹出一些路由，推到它的顶部）

void onActivate() {
    print('MixinActivate: $this');
  }
  onDeactivate() {
    print('MixinDeactivate: $this');
  }

型
在所有的设置中，我只需要在State类上使用这个mixin来获得它的功能。

class _MyHomePageState extends State<MyHomePage> with RouteAwareMixin {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  void onActivate() {
    _incrementCounter();
    super.onActivate();
  }
  (...)}

型
我将留下一个完整的演示应用程序显示演示代码，只需创建一个新的应用程序，并替换主.dart内容与下面的。

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
final routeObserver = RouteObserver<PageRoute>();
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  static const String _title = 'Flutter RouteAwareMixin';
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
      navigatorObservers: [routeObserver],
    );
  }
}
class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with RouteAwareMixin {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  void onActivate() {
    _incrementCounter();
    super.onActivate();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter AwareMixin'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('$_counter'),
            SizedBox(
              height: 16,
            ),
            ElevatedButton(
                onPressed: () => Navigator.of(context).push(MaterialPageRoute(
                      builder: (context) => SecondScreen(),
                    )),
                child: Text('OpenSecondScreen'))
          ],
        ),
      ),
    );
  }
}
class SecondScreen extends StatefulWidget {
  const SecondScreen({super.key});
  @override
  State<SecondScreen> createState() {
    return _SecondScreenState();
  }
}
class _SecondScreenState extends State<SecondScreen> with RouteAwareMixin {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  @override
  void onActivate() {
    _incrementCounter();
    _incrementCounter();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SecondScreen')),
      body: Center(
        child: Column(children: [
          Text('SecondScreenCounter: $_counter'),
          SizedBox(
            height: 16,
          ),
          ElevatedButton(
              onPressed: () =>
                  Navigator.of(context).pushReplacement(MaterialPageRoute(
                    builder: (context) => ThirdScreen(),
                  )),
              child: Text('OpenThirdScreen'))
        ]),
      ),
    );
  }
}
class ThirdScreen extends StatelessWidget {
  const ThirdScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ThirdScreen')),
    );
  }
}
mixin RouteAwareMixin<T extends StatefulWidget> on State<T>
    implements RouteAware {
  @override
  void didChangeDependencies() {
    routeObserver.subscribe(this, ModalRoute.of(context)! as PageRoute);
    super.didChangeDependencies();
  }
  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }
  @override
  void didPopNext() {
    onActivate();
  }
  @override
  void didPush() {
    onActivate();
  }
  @override
  void didPop() {
    onDeactivate();
  }
  @override
  void didPushNext() {
    onDeactivate();
  }
  void onActivate() {
    print('MixinActivate: $this');
  }
  onDeactivate() {
    print('MixinDeactivate: $this');
  }
}

型

展开查看全部

dart 如何重建一个小部件每次到达顶部的路线？

2条答案

相关问题

热门标签

最新问答