如何从颤振中的导航抽屉导航到其他屏幕

Question

我已尝试以下方式，但它不起作用，请告诉我解决方案

import 'package:book_recommendation_app/about.dart';
import 'package:book_recommendation_app/home.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';

Future<void> main() async {

  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);



  void onTap(menuItem) {
    switch (menuItem) {
      case 'item1':
        print('item1 clicked');
        break;
      case 'item2':
        print('item2 clicked');
        break;
      case 'item3':
        print('item3 clicked');
        break;
    }
  }



  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    var menuItems = <String>['item1', 'item2', 'item3'];
    return MaterialApp(
      title: 'Book Reccomendation Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Home'),
          actions: <Widget>[
            PopupMenuButton<String>(
                onSelected: onTap,
                itemBuilder: (BuildContext context) {
                  return menuItems.map((String choice) {
                    return PopupMenuItem<String>(
                      child: Text(choice),
                      value: choice,
                    );
                  }).toList();
                })
          ],
        ),
        body: searchBar(),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              const DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text('Drawer Header'),
              ),
              ListTile(
                title: const Text('Item 1'),
                onTap: () {
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: const Text('About us'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => AboutUs()),
                  );
                  Navigator.pop(context);

                },
              ),
            ],
          ),
        ),
      ),
      // home: const MyHomePage(title: 'Book Reccomendation Demo Home Page'),
    );
  }
}

//此小部件是您应用程序的根。 @覆盖 小部件构建（BuildContext 上下文）{ var menuItems =['item1', 'item2', 'item3']; 返回MaterialApp( 标题：“图书推荐演示”， 首页：脚手架( 应用程序栏：应用程序栏（ 标题：文本（'主页'）， 操作：[ PopupMenuButton( onSelected：onTap， itemBuilder：（BuildContext 上下文）{ return menuItems.map((字符串选择) { 返回 PopupMenuItem( 子项：文本（选择）， 值：选择， <代码>); }).toList(); <代码>}) <代码>]， <代码>）， 正文：searchBar()， 抽屉：抽屉( 子项：ListView( 填充：EdgeInsets.zero， 孩子们：[ const DrawerHeader( 装饰：BoxDecoration( 颜色：Colors.blue， <代码>）， child: Text('抽屉标题'), <代码>）， ListTile( 标题：const Text('项目 1')， 点击：() { Navigator.pop(上下文); <代码>}， <代码>）， ListTile( title: const Text('关于我们'), 点击：() { 导航器.push( 上下文， MaterialPageRoute(builder: (context) => AboutUs()), <代码>); Navigator.pop(context);

            },
          ),
        ],
      ),
    ),
  ),
  // home: const MyHomePage(title: 'Book Reccomendation Demo Home Page'),
);

} }

Answer 1

在推入新屏幕之前打开抽屉，
喜欢

Navigator.pop(context);
Navigator.push(context,
   MaterialPageRoute(builder: (context) => AboutUs(),
  ),
);

Answer 2

调用 Navigator.push 后不要立即调用 Navigator.pop(context)。因为对我来说，它看起来就像您当前正在推送到下一个屏幕，但立即再次弹出，以便永远不会到达它。

Answer 3

在此 ListTile 中，

ListTile(
            title: const Text('About us'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => AboutUs()),
              );
              Navigator.pop(context);

            },
          ),

您使用 Navigator.Push(context,MaterialPageRout(builder: (context) => AboutUs()));
然后你使用Navegator.pop(context);
这意味着您推送一个新屏幕然后关闭它，这就是

您需要删除此行的问题 Navigator.pop(context);

Answer 4

如果您不想使用 <，也可以使用 GetX 来更轻松地导航页面代码>MaterialPageRoute。

ListTile(
        title: const Text('About us'),
        onTap: () {
          Get.to(AboutUs());
          Navigator.pop(context);
        },
      ),