flutter 如何移动另一个底部导航栏项目的按钮是不是在底部导航栏项目

o3imoua4  于 2023-06-24  发布在  Flutter
关注(0)|答案(1)|浏览(173)

我想移动另一个底部导航栏项目的按钮是不是在底部导航栏项目在go_router

在这张图片中,当我按下“移动到B详细页”按钮时,底部导航栏位于**“Section A”,它会移动B详细页,底部导航栏位于“Section A”。但是,当我在底部导航栏位于“Section A”时按下“Move to B Detail Page”按钮时,我想将底部导航栏项目状态更改为“Section B”**。
在我的代码里

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

void main() {
  runApp(MaterialApp.router(
    routerConfig: router,
  ));
}

final GlobalKey<NavigatorState> _rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
final GlobalKey<NavigatorState> _homeNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'a');
final GlobalKey<NavigatorState> _settingsNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'b');

final GoRouter router = GoRouter(
    navigatorKey: _rootNavigatorKey,
    initialLocation: '/a',
    routes: <RouteBase> [
      StatefulShellRoute.indexedStack(
        builder: (context, state, navigationShell){
          return ScaffoldWithNavBar(navigationShell: navigationShell,);
        },
        branches: <StatefulShellBranch>[
          StatefulShellBranch(
            navigatorKey: _homeNavigatorKey,
            routes: <RouteBase>[
              GoRoute(
                path: '/a',
                builder: (context, state) => const HomePage(pageTitle: "A",),
                routes: [
                  GoRoute(
                    path: 'detail',
                    builder: (context, state) => const DetailPage(pageTitle: "A",),
                  ),
                ],
              ),
            ],
          ),
          StatefulShellBranch(
            navigatorKey: _settingsNavigatorKey,
            routes: [
              GoRoute(
                path: '/b',
                builder: (context, state) => const HomePage(pageTitle: "B",),
                routes: [
                  GoRoute(
                    path: 'detail',
                    builder: (context, state) => const DetailPage(pageTitle: "B",),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    ]
);

class ScaffoldWithNavBar extends StatelessWidget {
  const ScaffoldWithNavBar({
    required this.navigationShell,
    Key? key,
  }) : super(key: key ?? const ValueKey<String>('ScaffoldWithNavBar'));

  final StatefulNavigationShell navigationShell;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: navigationShell,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'),
          BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'),
        ],
        currentIndex: navigationShell.currentIndex,
        onTap: (int index) => navigationShell.goBranch(index),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({
    super.key,
    required this.pageTitle,
  });
  final String pageTitle;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("$pageTitle Home Page"),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () => context.push("/a/detail"),
                child: const Text("Move to A Detail Page"),
              ),
              ElevatedButton(
                onPressed: () => context.push("/b/detail"),
                child: const Text("Move to B Detail Page"),
              ),
            ]
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  const DetailPage({
    super.key,
    required this.pageTitle,
  });
  final String pageTitle;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("$pageTitle Detail Page"),
      ),
    );
  }
}

如果你能解决这个问题,我希望你能合作。
我试过RiverPod的状态管理,但我不能很好地工作。

ogq8wdun

ogq8wdun1#

您无法理解context.go()context.push()
根据Go_router
go()替换了整个路由栈,而push()在不触及任何现有页面的情况下将新页面推到顶部
您的问题可以通过更改为context.go()轻松解决

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("$pageTitle Home Page"),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                onPressed: () => context.go("/a/detail"), // change here
                child: const Text("Move to A Detail Page"),
              ),
              ElevatedButton(
                onPressed: () => context.go("/b/detail"), // change here
                child: const Text("Move to B Detail Page"),
              ),
            ]
        ),
      ),
    );
  }

相关问题