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

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'),
    );
  }
}

// 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'),
);

} }

Answer 1

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

Answer 2

在这个 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 3

如果您不想使用MaterialPageRoute go，您也可以使用GetX以更轻松的方式导航您的页面。

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

Answer 4

在推到新屏幕之前弹出抽屉，喜欢

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