如何在Widget内创建嵌套导航并限制视图至容器范围？

你的需求是点击“创建用户卡片”按钮时，在指定容器内切换视图，而非让嵌套导航占满整个屏幕。这里有标准的解决方案，不用非得依赖Stack。

标准实现方式：约束嵌套导航器的尺寸 #

Flutter的嵌套导航器（Nested Navigator）本身可以被包裹在容器类组件中，通过限制其尺寸就能实现局部视图切换：

• 用Container或ConstrainedBox包裹Navigator
  将嵌套导航器放在指定宽高的容器里，这样它的路由页面就只会在容器范围内渲染，不会扩散到整个屏幕。

• 示例代码

  class UserCardContainer extends StatefulWidget {
    const UserCardContainer({super.key});
  
    @override
    State<UserCardContainer> createState() => _UserCardContainerState();
  }
  
  class _UserCardContainerState extends State<UserCardContainer> {
    final GlobalKey<NavigatorState> _nestedNavigatorKey = GlobalKey();
  
    @override
    Widget build(BuildContext context) {
      return Container(
        width: 300, // 自定义容器宽度
        height: 400, // 自定义容器高度
        decoration: BoxDecoration(border: Border.all(color: Colors.grey)),
        child: Navigator(
          key: _nestedNavigatorKey,
          initialRoute: '/user-card',
          onGenerateRoute: (settings) {
            switch (settings.name) {
              case '/user-card':
                return MaterialPageRoute(
                  builder: (context) => UserCardView(
                    onCreateTap: () {
                      _nestedNavigatorKey.currentState?.pushNamed('/create-user-card');
                    },
                  ),
                );
              case '/create-user-card':
                return MaterialPageRoute(
                  builder: (context) => CreateUserCardView(
                    onBackTap: () {
                      _nestedNavigatorKey.currentState?.pop();
                    },
                  ),
                );
              default:
                return null;
            }
          },
        ),
      );
    }
  }
  
  // 用户卡片视图
  class UserCardView extends StatelessWidget {
    final VoidCallback onCreateTap;
    const UserCardView({super.key, required this.onCreateTap});
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: ElevatedButton(
          onPressed: onCreateTap,
          child: const Text('创建用户卡片'),
        ),
      );
    }
  }
  
  // 创建用户卡片视图
  class CreateUserCardView extends StatelessWidget {
    final VoidCallback onBackTap;
    const CreateUserCardView({super.key, required this.onBackTap});
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('创建用户卡片表单'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: onBackTap,
              child: const Text('返回'),
            ),
          ],
        ),
      );
    }
  }
  

关于Stack的使用场景 #

如果你的视图切换只需要简单的显隐切换（比如不需要维护路由栈、没有前进后退需求），Stack配合Visibility或Opacity也能实现，但这种方式缺少导航器的路由管理能力，仅适合简单场景。而嵌套导航器更适合需要维护路由栈、有完整页面切换逻辑的场景，是更标准的解决方案。

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