flutter GoRouter -我可以一次推送2个页面吗?

njthzxwz  于 2023-01-06  发布在  Flutter
关注(0)|答案(2)|浏览(176)

我使用的是go_router,我将在回调一个按钮时执行此操作:

EvelatedButton(
  onPressed: () {
    GoRouter.of(context)
      ..push('/page-1')
      ..push('/page-2');
  },
)

这是一次推送历史记录中的2个页面,用户点击这个按钮后,最后是page-2页面,弹出页面时是page-1
这样做是否可以接受,或有甚么理由不这样做?这些理由是甚么?我应该怎样做呢?
我想我在go_router的例子中还没有看到过类似的东西。
有关更多上下文,请参阅以下代码片段(或checkout https://github.com/ValentinVignal/flutter_app_stable/tree/go-router/push-twice-at-once):
当按下按钮时,我希望显示对话框页面,并在背景中显示page-1

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

void main() {
  runApp(const MyApp());
}

final router = GoRouter(
  initialLocation: '/page-0',
  routes: [
    GoRoute(
      path: '/page-0',
      builder: (_, __) => const Page0Screen(),
    ),
    GoRoute(
      path: '/page-1',
      builder: (_, __) => const Page1Screen(),
    ),
    GoRoute(
      path: '/dialog',
      pageBuilder: (context, state) => DialogPage(
        key: state.pageKey,
        child: const DialogScreen(),
      ),
    ),
  ],
);

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 0')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            GoRouter.of(context)
              ..push('/page-1')
              ..push('/dialog');
          },
          child: const Text('Push'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: const Center(
        child: Text('Page 1'),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return const AlertDialog(
      title: Text('Dialog'),
    );
  }
}

class DialogPage extends Page {
  const DialogPage({
    required this.child,
    super.key,
  });

  final Widget child;

  @override
  Route createRoute(BuildContext context) {
    return DialogRoute(
      settings: this,
      context: context,
      builder: (context) {
        return child;
      },
    );
  }
}

vu8f3i0k

vu8f3i0k1#

假设您的目标是显示一个对话框,您可以在flutter中使用showDialog函数。
下面是一个示例

showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Basic dialog title'),
          content: const Text('A dialog is a type of modal window that\n'
              'appears in front of app content to\n'
              'provide critical information, or prompt\n'
              'for a decision to be made.'),
          actions: <Widget>[
            TextButton(
              style: TextButton.styleFrom(
                textStyle: Theme.of(context).textTheme.labelLarge,
              ),
              child: const Text('Disable'),
              onPressed: () {
                GoRouter.of(context).pop();
              },
            ),
            TextButton(
              style: TextButton.styleFrom(
                textStyle: Theme.of(context).textTheme.labelLarge,
              ),
              child: const Text('Enable'),
              onPressed: () {
                GoRouter.of(context).pop();
              },
            ),
          ],
        );
      },
    );
q8l4jmvw

q8l4jmvw2#

go_router不支持同时推送两个routes。同时推送两个push不是一个好的做法。
你能做什么呢?

1.您可以从page1过渡到page2
1.使用context.go('/dialog');转到page2init方法中的dialog page
1.在退出dialog page时,您可以使用context.pop(),这将使您进入page1

相关问题