Go Router：如何在小部件内实现嵌套导航

Question

我想在小部件内添加嵌套导航，与此 gif 相同：demo。我知道这个功能在 beamer 和 auto_route 等软件包中可用，但我想知道 go_router 是否也可以实现此功能。

Answer 1

您可以通过使用 Flutter 中的两个

Router.withConfig

小部件并向它们传递两个单独的

GoRouter

来实现此目的，如下所示：

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Body(),
      ),
    ),
  );
}

class Body extends StatefulWidget {
  const Body({super.key});

  @override
  State<Body> createState() => _BodyState();
}

class _BodyState extends State<Body> {
  final router1 = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const Page(),
        routes: [
          GoRoute(
            path: 'sub-page',
            builder: (context, state) => const Page(),
          ),
        ],
      ),
    ],
  );
  final router2 = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (context, state) => const Page(),
        routes: [
          GoRoute(
            path: 'sub-page',
            builder: (context, state) => const Page(),
          ),
        ],
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Router.withConfig(config: router1),
          ),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Router.withConfig(config: router2),
          ),
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final route = ModalRoute.of(context)!.settings.name;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: InkWell(
        onTap: () => context.go('/sub-page'),
        child: Center(
          child: Text('Route: $route'),
        ),
      ),
    );
  }
}

Go Router：如何在小部件内实现嵌套导航

问题描述投票：0回答：1

1个回答

最新问题

Go Router：如何在小部件内实现嵌套导航

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1