可以用GoRouter实现PageView吗？

Question

我在互联网上找不到关于此问题的答案，我想知道是否可以使用

BottomNavBar

和

PageView

创建视图。

默认 PageView 有必需的参数

children

所以我认为这是不可能的，但是使用构造函数

PageView.builder

我们可以使用

ShellRoute

将子项传递给

itemBuilder

的

PageView.builder

。

我的想法是好的还是IT不会那样工作？ 或者也许还有其他解决方案可以使用 GoRouter 实现 PageView 功能？

Answer 1

StatefulNavigationShell 允许在应用程序的不同分支内维护状态并管理导航。

/// This will contains all the routes name of the application
class AppRoutes {
  /// THese are the routes name that will be used in the code
  static const first = 'first';
  static const second = 'second';
  static const third = 'third';

  /// THese are the routes path that will show in the url
  static const firstPath = '/first';
  static const secondPath = '/second';
  static const thirdPath = '/third';
}

class RouterConfiguration {
  static final _rootNavigatorKey = GlobalKey<NavigatorState>();

  static final router = GoRouter(
    initialLocation: AppRoutes.firstPath,
    debugLogDiagnostics: false,
    navigatorKey: _rootNavigatorKey,  
    routes: [
      StatefulShellRoute.indexedStack(
        builder: (c, state, navShell) {
          return DashboardScreen(navigationShell: navShell);
        },
        branches: [
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: AppRoutes.firstPath,
                name: AppRoutes.first,
                builder: (context, state) {
                  return const Scaffold(
                    body: Center(
                      child: Text('first screen'),
                    ),
                  );
                },
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: AppRoutes.secondPath,
                name: AppRoutes.second,
                builder: (context, state) {
                  return const Scaffold(
                    body: Center(
                      child: Text('second screen'),
                    ),
                  );
                },
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              GoRoute(
                name: AppRoutes.third,
                path: AppRoutes.thirdPath,
                builder: (context, state) {
                  return const Scaffold(
                    body: Center(
                      child: Text('Third screen'),
                    ),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    ],
  );
}

仪表板屏幕： StatefulNavigationShell 使用 goBranch 函数进行屏幕切换

class DashboardScreen extends StatefulWidget {
  final StatefulNavigationShell navigationShell;

  const DashboardScreen({super.key, required this.navigationShell});

  @override
  State<DashboardScreen> createState() => _DashboardScreenState();
}

class _DashboardScreenState extends State<DashboardScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: widget.navigationShell),
      bottomNavigationBar: Container(
        height: 80,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(25),
            topRight: Radius.circular(25),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 10,
              offset: Offset(0, -5),
            ),
          ],
        ),
        child: Padding(
          padding: const EdgeInsets.only(top: 26),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              NavBarItem(
                icon: Icon(Icons.home),
                label: 'First',
                onTap: () {
                  widget.navigationShell.goBranch(0);
                },
              ),
              NavBarItem(
                icon: Icon(Icons.search),
                label: 'Second',
                onTap: () {
                  widget.navigationShell.goBranch(1);
                },
              ),
              NavBarItem(
                icon: Icon(Icons.account_circle),
                label: 'Third',
                onTap: () {
                  widget.navigationShell.goBranch(2);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class NavBarItem extends StatelessWidget {
  final Widget icon;
  final String label;
  final VoidCallback onTap;

  const NavBarItem({
    super.key,
    required this.icon,
    required this.label,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          icon,
          SizedBox(height: 4),
          Text(label),
        ],
      ),
    );
  }
}

我想您正在寻找这个，对吗？如果您需要更多详细信息，请告诉我！