flutter 如何使用抽屉在两个页面之间导航?

nzrxty8p  于 2023-01-02  发布在  Flutter
关注(0)|答案(1)|浏览(182)

我是Flutter的新手,我试图让一些简单的功能工作,但我遇到了麻烦。
我希望能够使用抽屉在两个页面之间导航。我能够从主页导航到第二个屏幕,但无法导航回来。
应用程序在firstPage上启动。当我打开抽屉时,我点击了“第二个”选项。这会将应用程序导航到secondPage。但一旦在secondPage上,如果我再次打开抽屉并点击“第一个”,我就不会被导航回firstPage
我创建了一个小应用程序来演示这一点:

import 'package:flutter/material.dart';

import 'package:routemaster/routemaster.dart';

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
      routeInformationParser: const RoutemasterParser(),
    );
  }
}

final routes = RouteMap(
  routes: {
    '/':(route) => const MaterialPage(
      key: ValueKey('first'),
      child: firstPage,
    ),
    '/second':(route) => const MaterialPage(
      key: ValueKey('second'),
      child: secondPage,
    ),
  },
);

const firstPage = AppPage(
  title: Text('First'),
  body: Text('First'),
  color: Colors.purple
);

const secondPage = AppPage(
  title: Text('Second'),
  body: Text('Second'),
  color: Colors.green
);

class AppPage extends StatelessWidget {
  final Text title;
  final Text body;
  final Color color;

  const AppPage({
    super.key,
    required this.title,
    required this.body,
    required this.color
  });

  @override
  Widget build (BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: const Text('First'),
              onTap: () => Routemaster.of(context).push('/'),
            ),
            ListTile(
              title: const Text('Second'),
              onTap: () => Routemaster.of(context).push('/second'),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: title,
      ),
      body: Container(
        decoration: BoxDecoration(color: color),
        child: Center(child: body),
      ),
    );
  }
}

我还创建了一个pastebin链接:https://pastebin.com/PRYtwSeU如果那样更简单的话。
当我单击抽屉式导航栏中的“第一个”项目时,我应该被带到firstPage页面。
当我单击抽屉式导航栏中的“第二个”项目时,我应该被带到secondPage页面。
我试过使用Navigator.pop()Routemaster.of(context).pop(),但都不起作用。
有人能帮我了解如何解决这个问题,这样我就可以使用抽屉在两页之间导航了吗?

iezvtpos

iezvtpos1#

要导航回第一页,可以使用popUntil

onTap: () => Routemaster.of(context).popUntil(
                (route) => route.path == '/first',
              ),

使用您的示例:

import 'package:flutter/material.dart';

import 'package:routemaster/routemaster.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
      routeInformationParser: const RoutemasterParser(),
    );
  }
}

final routes = RouteMap(
  routes: {
    '/': (route) => const MaterialPage(
          key: ValueKey('first'),
          child: firstPage,
        ),
    '/second': (route) => const MaterialPage(
          key: ValueKey('second'),
          child: secondPage,
        ),
  },
);

const firstPage =
    AppPage(title: Text('First'), body: Text('First'), color: Colors.purple);

const secondPage =
    AppPage(title: Text('Second'), body: Text('Second'), color: Colors.green);

class AppPage extends StatelessWidget {
  final Text title;
  final Text body;
  final Color color;

  const AppPage(
      {super.key,
      required this.title,
      required this.body,
      required this.color});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(
        child: ListView(
          children: [
            ListTile(
              title: const Text('First'),
              onTap: () => Routemaster.of(context).popUntil(
                //direction from right to left
                (route) => route.path == '/first',
              ),
            ),
            ListTile(
              title: const Text('Second'),
              onTap: () => Routemaster.of(context).push('/second'),
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: title,
      ),
      body: Container(
        decoration: BoxDecoration(color: color),
        child: Center(child: body),
      ),
    );
  }
}

相关问题