Flutter:可以检测抽屉何时打开？

Question

是否可以检测抽屉何时打开，以便我们可以运行一些例程来更新其内容？

我的一个典型用例是显示关注者、点赞者的数量......为此，我需要轮询服务器以获取此信息，然后显示它。

我尝试实现一个 NavigatorObserver 来捕捉 Drawer 可见/隐藏的时刻，但 NavigatorObserver 没有检测到有关 Drawer 的任何信息。

这是链接到 NavigatorObserver 的代码:

import 'package:flutter/material.dart';

typedef void OnObservation(Route<dynamic> route, Route<dynamic> previousRoute);
typedef void OnStartGesture();

class NavigationObserver extends NavigatorObserver {
  OnObservation onPushed;
  OnObservation onPopped;
  OnObservation onRemoved;
  OnObservation onReplaced;
  OnStartGesture onStartGesture;

  @override
  void didPush(Route<dynamic> route, Route<dynamic> previousRoute) {
    if (onPushed != null) {
      onPushed(route, previousRoute);
    }
  }

  @override
  void didPop(Route<dynamic> route, Route<dynamic> previousRoute) {
    if (onPopped != null) {
      onPopped(route, previousRoute);
    }
  }

  @override
  void didRemove(Route<dynamic> route, Route<dynamic> previousRoute) {
    if (onRemoved != null)
      onRemoved(route, previousRoute);
  }

  @override
  void didReplace({ Route<dynamic> oldRoute, Route<dynamic> newRoute }) {
    if (onReplaced != null)
      onReplaced(newRoute, oldRoute);
  }

  @override
  void didStartUserGesture() { 
    if (onStartGesture != null){
      onStartGesture();
    }
  }
}

以及这个观察者的初始化

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final NavigationObserver _observer = new NavigationObserver()
                                              ..onPushed = (Route<dynamic> route, Route<dynamic> previousRoute) {
                                                print('** pushed route: $route');
                                              }
                                              ..onPopped = (Route<dynamic> route, Route<dynamic> previousRoute) {
                                                print('** poped route: $route');
                                              }
                                              ..onReplaced = (Route<dynamic> route, Route<dynamic> previousRoute) {
                                                print('** replaced route: $route');
                                              }
                                              ..onStartGesture = () {
                                                print('** on start gesture');
                                              };

  @override
  void initState(){
    super.initState();
  }

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Title',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new SplashScreen(),
        routes: <String, WidgetBuilder> {
          '/splashscreen': (BuildContext context) => new SplashScreen(),
        },
        navigatorObservers: <NavigationObserver>[_observer],
    );
  }
}

感谢您的帮助。

Answer 1

这个答案现在已经过时了。请参阅@dees91 的回答。

抽屉打开/关闭时检测和运行函数

• 通过任何操作打开抽屉时运行initState()。
• 通过任何操作关闭抽屉时运行 dispose()。

class MyDrawer extends StatefulWidget {
    @override
    _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {

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

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

    @override
    Widget build(BuildContext context) {
        return Drawer(
            child: Column(
                children: <Widget>[
                    Text("test1"),
                    Text("test2"),
                    Text("test3"),
                ],
            ),
        );
    }
}

状态管理注意事项

如果您使用这些函数更改状态以重建抽屉项目，您可能会遇到错误:Unhandled Exception: setState() or markNeedsBuild() called during build。

这可以通过在 initState() 中使用以下两个函数来处理 source

选项 1

WidgetsBinding.instance.addPostFrameCallback((_){
  // Add Your Code here.
});

选项 2

SchedulerBinding.instance.addPostFrameCallback((_) {
  // add your code here.
});

选项 1 的完整示例

@override
void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
        // Your Code Here
    });
}