Flutter：ShowDialog 不适用于 ListTile 的 OnTap() 方法

Question

我正在使用抽屉创建一个菜单，其中包含用于选项的 ListTiles。我想在用户点击图块时创建一个弹出窗口。目前，即使在 showDialog 之后有一个 Navigator.pop().

，当点击图块时代码也不会显示任何内容

// Drawer that includes the ListTiles in question
 Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('Smash Tracker'),
                ),
              ),
              ListTile(
                title: Text(
                    'About',
                  style: TextStyle(
                    fontFamily: 'Smash',
                    fontSize: 15.0,
                    color: Color.fromRGBO(77, 114, 152, 1.0),
                  ),
                ),
                onTap: () {
                  // Show PopUp
                  showDialog(context: context, child:
                    new AlertDialog(
                      title: new Text(
                        'About',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                      content: new Text(
                        'This is a placeholder. This is a placeholder. This is a placeholder. This is a placeholder.',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                    )
                  );

                  // Doesn't run
                  Navigator.pop(context);
                },
              ),

这是一个演示：

via GIPHY

其他 ListTiles 在其 onTap() 方法中只有 Navigator.pop() 。

Answer 1

该对话框未显示，因为您正在使用 Navigator.pop(context) 立即弹出它。你可以 await Dialog 因为它 returns 在弹出之前 Future<T>。

我以您的小部件树为例添加了一个演示：

Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Smash Tracker'),
            ),
            ListTile(
              title: Text(
                'About',
                style: TextStyle(
                  fontFamily: 'Smash',
                  fontSize: 15.0,
                  color: Color.fromRGBO(77, 114, 152, 1.0),
                ),
              ),
              onTap: () async { // mark the function as async
                print('tap');
                // Show PopUp

                // await the dialog
                 await showDialog(
                    context: context,
                    child: new AlertDialog(
                      title: new Text(
                        'About',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                      content: new Text(
                        'This is a placeholder. This is a placeholder. This is a placeholder. This is a placeholder.',
                        style: TextStyle(fontFamily: "Smash"),
                      ),
                    ));

                // Doesn't run
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),

输出：

Flutter：ShowDialog 不适用于 ListTile 的 OnTap() 方法

Flutter: ShowDialog not working with the OnTap() method of a ListTile

flutter

dart

showdialog