如何在 Flutter 上收听 isDrawerOpen？

Question

我想在抽屉打开时隐藏一些小部件。 （这意味着当用户打开抽屉时，我需要隐藏一些小部件）

目前，我正在使用

  if(!_scaffoldKey.currentState.isDrawerOpen)
     //hide widget

但这不是listen 。 有什么方法可以监听抽屉回调吗？

Answer 1

到目前为止，flutter 中没有回调机制，它为Drawer()提供事件，但我们仍然可以为它应用一个好的解决方案。

我使用两个有状态的小部件划分解决方案，

1. 主屏幕（主小部件）
2. MyDrawer（抽屉小部件）

1. 主屏幕：

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  bool _isDrawerOpen = false;

  void drawerCallback(bool isOpen) {
    print('Drawer Status:' + isOpen.toString());
    // Based on the bool value set visibility of your widget
    WidgetsBinding.instance.addPostFrameCallback((_){
      setState(() {
        _isDrawerOpen = isOpen;
      });

    });

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(title: Text('Nav Sample App')),
        body: _isDrawerOpen
            ? Align(alignment: Alignment.centerRight, child: Text('Drawer Open'))
            : Align(alignment: Alignment.centerRight, child: Text('Drawr Close')),
        drawer: MyDrawer(drawerCallback));
  }
}

上面您可以看到，基于_isDrawerOpen我们正在使用三元运算符在主体中设置小部件。

2.我的抽屉（）

class MyDrawer extends StatefulWidget {
  final Function _drawerCallback;
  MyDrawer(this._drawerCallback);

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

class _MyDrawerState extends State<MyDrawer> {
  @override
  void initState() {
    super.initState();
    widget._drawerCallback(true);
  }

  @override
  void dispose() {
    widget._drawerCallback(false);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: <Widget>[
          DrawerHeader(
            child: Text('Drawer Header'),
            decoration: BoxDecoration(color: Colors.blue),
          ),
          Text("Drawer Item 1"),
          Text("Drawer Item 2"),
        ],
      ),
    );
  }
}

逻辑的核心应用在我们返回状态的initState()和dispose()回调中。

Answer 2

您可以将 onTap() function 用于使用 ListView 的抽屉：

Drawer(
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawers'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Drawer 1'),
              onTap: () {
                // Insert code to hide or delete your desired widget

                // Then close the drawer
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),//drawer