📜  Navigator.of(context).pop();给出黑屏而不是关闭 draer - C 编程语言(1)

📅  最后修改于: 2023-12-03 15:03:09.064000             🧑  作者: Mango

以Navigator.of(context).pop()给出黑屏而不是关闭drawer

在Flutter中,我们可以使用 drawer 组件来实现抽屉式的导航栏。当用户点击导航栏里的选项时,我们通常会使用 Navigator.of(context).pop() 来关闭抽屉。

但是,如果我们在打开抽屉时将屏幕设置为黑色并禁用所有界面元素,以创建一个“模态”样式的抽屉,那么使用 Navigator.of(context).pop() 将不是你期望的结果。

当你调用 Navigator.of(context).pop() 时,底部的画面会重绘,导致黑色遮罩在瞬间消失,用户可以在不关闭抽屉的情况下继续与应用程序交互。对于模态对话框和抽屉,这都不是我们想要的行为。

为了解决这个问题,我们可以使用 Navigator.popUntil() 来弹出屏幕上所有的路由,以确保黑色遮罩和抽屉一起移除。以下是一个简单的示例程序,说明如何实现。

import 'package:flutter/material.dart';

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

class _MyDrawerState extends State<MyDrawer> {
  bool _showBlackScreen = false;

  void _toggleBlackScreen() {
    setState(() {
      _showBlackScreen = !_showBlackScreen;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Container(
        color: Colors.white,
        child: ListView(
          children: <Widget>[
            ListTile(
              title: Text("Toggle black screen"),
              onTap: () {
                _toggleBlackScreen();
                Navigator.of(context).pop();
              },
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    if (_showBlackScreen) {
      Navigator.popUntil(context, (route) => route.isFirst);
    }
    super.dispose();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (BuildContext context) {
          return Scaffold(
            appBar: AppBar(
              title: Text("My App"),
            ),
            drawer: MyDrawer(),
            body: _buildBody(context),
          );
        },
      ),
    );
  }

  Widget _buildBody(BuildContext context) {
    // Build the screen.
  }
}

在这个例子中,我们在 MyDrawer 组件中添加了一个开关,用来切换是否显示黑色遮罩。当用户点击这个选项时,我们先设置 _showBlackScreen 变量的值,然后关闭抽屉。这是非常重要的一步,因为如果我们不关闭抽屉,用户点击抽屉以外的部分时会导致对话框的消失。

在 MyDrawer 组件的 dispose() 方法中,我们检查 _showBlackScreen 变量的值。如果它为 true,则调用 Navigator.popUntil() 来弹出所有的路由,以确保黑色遮罩和抽屉一起移除,这样用户就不能在不关闭抽屉的情况下继续与应用程序交互了。

总的来说,使用 Navigator.popUntil() 来弹出所有的路由是一种有效的解决方案,可以确保在关闭黑色遮罩和抽屉时不会出现问题。这个方法可以用于模态对话框和抽屉,以创建完整的“模态”样式交互。