Flutter中的组件卸载（相当于React componentWillUnmount） - Flutter web

Question

我有在页面更改时卸载的小部件。

我正在使用颤振网络。

我查看了所有方法 here，但似乎找不到。

我试过了

@override
void dispose() {
  print("dispose?"); 
  super.dispose();   
}

@override
void deactivate() {
  print("deactivate");
  super.deactivate();
}

两者都没有被调用。

当小部件没有“构建”（渲染）时，我需要检测这是一件非常简单的事情。我不认为有一些东西可以检测页面更改是解决方案，这似乎有点矫枉过正。 谢谢

添加代码示例

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes Demo',
    initialRoute: '/',
    routes: {
      '/': (context) => FirstScreen(),
      '/second': (context) => SecondScreen(),
    },
  ));
}

class FirstScreen extends StatefulWidget {
  FirstScreen({Key key}) : super(key: key);

  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
void dispose() {
  print("dispose"); 
  super.dispose();   
}

@override
void deactivate() {
  print("deactivate");
  super.deactivate();
}
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Launch screen'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

当导航到第二个屏幕并且第一个屏幕小部件不再是渲染树的一部分时，似乎既没有调用 deactive 也没有调用 dispose。那么调用什么来检测 Screen 1 离开了渲染树呢？

Answer 1

如果 Widget 尚未安装，则返回它。但是你必须在任何 setState 方法之前这样做

if (!mounted) return;
setState(() {});

或

if (mounted) {
   //your code
};
setState(() {});

您可以在此处阅读更多信息：https://api.flutter.dev/flutter/widgets/State/mounted.html

无论如何，在构建之前唯一调用的是initState。您在其中所做的一切都在build 之前。 初始化状态：https://api.flutter.dev/flutter/widgets/EditableTextState/initState.html

Answer 2

在您添加的代码示例中，屏幕 1 永远不会卸载，因此不会触发这些回调。屏幕 2 呈现在屏幕 1 的顶部，并且两者都已安装。

可以确认第1屏一直挂载，通过在其状态中添加周期性回调，添加让它打印出是否还挂载，例如：

  import 'dart:async';
  
  // in _FirstScreenState, add:

  @override
  void initState() {
    Timer.periodic(Duration(seconds: 1), (timer) {
      print("screen 1 is still mounted? $mounted");
    });
    super.initState();
  }

你会看到，它总是挂载的，即使屏幕 2 渲染在屏幕 1 的顶部。

此外，您可以对屏幕 2 执行相同的 deactivate 和 dispose 逻辑，您会看到，当从屏幕 2 导航回屏幕 1 时，屏幕 2 真正卸载，并且两个回调都有效正确。因此再次证明问题不在于这些回调，而是屏幕 1 没有卸载。

所以是的...在您发布代码示例之前，我以为您遇到了一些关于小部件被卸载（已失效）的错误。但是在这种情况下，由于您使用的是按钮，因此可以准确地知道页面转换发生的时间，也许您可​​以在按钮回调中执行您需要执行的任何业务逻辑？