Question

我有一个抽屉，上面有通往不同搜索页面的命名路由。推送路线可导航到搜索页面。搜索页面中的每个项目都导航到详细信息页面。后退按钮将弹出详细信息页面，然后我将返回搜索页面。这种情况充分利用了导航器堆栈。

但是如何在多个搜索页面之间切换？我只能弹出一个搜索页，然后再推另一个。

我正在寻找的另一个用例是在详细信息页面之间切换。在这种情况下，导航器将保持（按此顺序）：第一个搜索页面，第一个详细信息页面，第二个搜索页面，第二个详细信息页面。我想在两个详细信息页面之间切换。

有什么方法可以窥视Navigator堆栈并将所窥视的条目带到堆栈顶部吗？

这里有多个导航器有帮助吗？我可以在导航器之间切换吗？

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

GlobalKey<NavigatorState> navKey = GlobalKey( );

void main( ) => runApp( MyApp( ) );

class MyApp extends StatelessWidget {

    final Provider<MyMenu> menuProvider = Provider(
            builder: ( context ) => MyMenu( ) );

    @override
    Widget build( BuildContext context ) {
        return MultiProvider(
            child: MaterialApp(
                title: 'My App',
                home: MyHomePage( ),
                navigatorKey: navKey,
                routes: {
                    routePage1: ( context ) => Page1( ),
                    routePage2: ( context ) => Page2( ),
                },
                theme: ThemeData( primarySwatch: Colors.blue, ),
            ),
            providers: [
                menuProvider,
            ], );
    }
}

class MyMenu extends StatelessWidget {

    @override
    Widget build( BuildContext context ) {
        String currentRoute = getCurrentRouteName( );

        return Drawer( child: ListView( children: <Widget>[
            ListTile(
                leading: Icon( Icons.home ),
                onTap: ( ) => navigateTo( context, routePage1 ),
                selected: currentRoute == routePage1,
                title: Text( "Page 1" ),
            ),
            ListTile(
                onTap: ( ) => navigateTo( context, routePage1 ),
                selected: currentRoute == routePage1,
                title: Text( "Page 1" ),
            ),
            ListTile(
                onTap: ( ) => navigateTo( context, routePage2 ),
                selected: currentRoute == routePage2,
                title: Text( "Page 2" ),
            ),
        ],
        ),
        );
    }
}

String getCurrentRouteName( ) {
    String currentRouteName;
    navKey.currentState.popUntil( ( route ) {
        currentRouteName = route.settings.name;
        return true;
    } );
    return currentRouteName;
}

void navigateTo( BuildContext context, String namedRoute, { Object arguments } ) {
    // --- Close drawer menu if open
    if ( Scaffold
            .of( context )
            .isDrawerOpen ) {
        navKey.currentState.pop( );
    }

    // --- No navigation if target page already active
    String currentRoute = getCurrentRouteName( );
    if ( currentRoute == namedRoute ) return;

    // --- Navigate to target
    if ( currentRoute == "/" ) {
        navKey.currentState.pushNamed( namedRoute, arguments: arguments );
    } else {
        navKey.currentState.popAndPushNamed( namedRoute, arguments: arguments );
    }
}

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {
    @override
    Widget build( BuildContext context ) {
        String currentRoute = getCurrentRouteName( );
        return AppBar(
            leading: MenuButton( ),
            title: Text( 'my app -> ${currentRoute}' ), );
    }

    @override
    Size get preferredSize => Size.fromHeight( kToolbarHeight );
}

class MenuButton extends StatelessWidget {
    @override
    Widget build( BuildContext context ) {
        return IconButton(
            icon: Icon( Icons.menu ),
            onPressed: ( ) {
                ScaffoldState scaffold = Scaffold.of( context );
                if ( scaffold.isDrawerOpen ) {
                    navKey.currentState.pop( );
                } else {
                    scaffold.openDrawer( );
                }
            },
        );
    }
}

class MyHomePage extends StatelessWidget {
    @override
    Widget build( BuildContext context ) {
        return Scaffold(
            appBar: MyAppBar( ),
            body: Center(
                child: Text( "This is the Homepage" ),
            ),
            drawer: Provider.of<MyMenu>( context ),
        );
    }
}

const String routePage1 = '/page1';

class Page1 extends StatelessWidget {
    @override
    Widget build( BuildContext context ) {
        return Scaffold(
            appBar: MyAppBar( ),
            body: Center(
                child: Text( "This is Page 1" ),
            ),
            drawer: Provider.of<MyMenu>( context ),
        );
    }
}

const String routePage2 = '/page2';

class Page2 extends StatelessWidget {
    @override
    Widget build( BuildContext context ) {
        return Scaffold(
            appBar: MyAppBar( ),
            body: Center(
                child: Text( "This is Page 2" ),
            ),
            drawer: Provider.of<MyMenu>( context ),
        );
    }
}

Answer 1

创建一个字段类型的窗口小部件，并替换菜单项上的那些窗口小部件，如下面的代码。

 enum DrawerSelection {
  home,
  cropFamilies,
  cropCalender,
  favorites,
  settings,
  notes,
  contactUs,
  disclaimer
 }

class _MyHomePage extends State<MyHomePage> {

DrawerSelection _drawerSelection = DrawerSelection.home;
Widget _appBarTitle = Text("Home");


Widget _currentWidget = MainWidget();

ListTile(
        selected: _drawerSelection == DrawerSelection.home,
        title: Text('Home'),
        leading: Icon(Icons.home),
        onTap: () {
          _drawerSelection = DrawerSelection.home;
          Navigator.pop(context);
          _currentWidget = MainWidget();
          setState(() {
            _appBarTitle = Text("Home");
          });
        },
      ),
  ListTile(
        selected: _drawerSelection == DrawerSelection.cropFamilies,
        title: Text('Crop families فصل کا خاندان'),
        leading: Icon(Icons.nature),
        onTap: () {
          _drawerSelection = DrawerSelection.cropFamilies;
          Navigator.pop(context);
          _currentWidget = CropFamiliesWidget();
          setState(() {
            _appBarTitle = Text("Crop families فصل کا خاندان");
          });
        },
      ),

在所有菜单项中执行此操作。如果不想在抽屉菜单中显示所选颜色，则可以忽略抽屉选择。

更新如果您想在堆栈中导航回所需的路线，可以使用以下popUntil方法进行操作。see here

  Navigator.popUntil(context, ModalRoute.withName('/login'));

Flutter：如何切换到导航器堆栈中已存在的页面？

1 个答案: