Flutter中如何实现左侧面板子视图添加与带返回键的子导航

你需要的是嵌套导航（Nested Navigation），让左侧面板拥有独立的导航栈，右侧编辑区域保持固定。用GoRouter的ShellRoute可以完美实现这个需求，它能创建一个固定的布局外壳，仅替换指定区域的内容。

步骤1：配置GoRouter的嵌套路由 #

首先替换原来的MaterialApp为MaterialApp.router，并配置包含ShellRoute的路由结构：

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

final GoRouter _router = GoRouter(
  initialLocation: '/left/home', // 默认显示左侧首页
  routes: [
    // 外壳路由：包含固定的左右面板布局
    ShellRoute(
      builder: (context, state, child) {
        return Scaffold(
          body: Row(
            children: [
              // 左侧区域：由子路由替换内容
              SizedBox(
                width: 200,
                child: child,
              ),
              // 右侧编辑区：始终保持不变
              const Expanded(
                child: Rightpanel(),
              ),
            ],
          ),
        );
      },
      // 左侧面板的子路由
      routes: [
        GoRoute(
          path: '/left/home',
          builder: (context, state) => const LeftHomePage(),
        ),
        GoRoute(
          path: '/left/elements',
          builder: (context, state) => const LeftElementsPage(),
        ),
        GoRoute(
          path: '/left/text',
          builder: (context, state) => const LeftTextPage(),
        ),
        // 可添加更多左侧子页面路由
      ],
    ),
  ],
);

步骤2：修改根Widget #

将原来的MaterialApp替换为GoRouter的路由配置：

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
      title: 'Canva Clone',
    );
  }
}

步骤3：实现左侧面板的页面 #

左侧首页（带跳转按钮）

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 20),
        ListTile(
          title: const Text('元素'),
          onTap: () => context.go('/left/elements'),
        ),
        ListTile(
          title: const Text('文字'),
          onTap: () => context.go('/left/text'),
        ),
        // 其他面板选项
      ],
    );
  }
}

左侧子页面（带返回按钮）

以元素面板为例，添加返回按钮回到首页：

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // 返回按钮
        IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            // 方法1：回到上一页（保留导航栈）
            context.pop();
            // 方法2：直接跳转首页（重置导航栈）
            // context.go('/left/home');
          },
        ),
        const Text('元素面板内容'),
        // 这里添加具体的元素选项
      ],
    );
  }
}

关键说明 #

• ShellRoute的作用是创建一个固定的布局框架，右侧Rightpanel作为框架的一部分，不会随左侧导航变化。
• 左侧的所有子路由都嵌套在ShellRoute下，只会替换左侧的child区域，完全不影响右侧编辑区。
• 如果需要传递参数，可以在路由path中定义（如/left/element/:id），通过state.params['id']获取参数值。

内容的提问来源于stack exchange，提问作者shashank sahu