Flutter底部弹窗内使用Navigator.push导航的适配方案咨询

方案一：保持弹窗常规尺寸的嵌套导航实现 #

不要直接嵌套完整的MaterialApp，而是单独使用Navigator组件，同时给弹窗容器设置明确的尺寸约束，既能保留导航能力，又能让弹窗维持最小/指定尺寸。

核心思路：在showModalBottomSheet的builder中，用ConstrainedBox或Container限制弹窗的最大高度，内部嵌套Navigator管理弹窗内的页面路由，而非依赖全局的MaterialApp导航树。

示例代码：

showModalBottomSheet(
  context: context,
  isScrollControlled: true, // 根据需求调整
  builder: (context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(maxHeight: 600), // 指定弹窗最大高度
      child: Navigator(
        initialRoute: '/',
        onGenerateRoute: (settings) {
          switch (settings.name) {
            case '/':
              return MaterialPageRoute(
                builder: (_) => FirstModalPage(
                  onNavigate: () {
                    Navigator.of(_).pushNamed('/second');
                  },
                ),
                fullscreenDialog: false, // 关键：禁止页面全屏
              );
            case '/second':
              return MaterialPageRoute(
                builder: (_) => SecondModalPage(
                  onBack: () {
                    Navigator.of(_).pop();
                  },
                ),
                fullscreenDialog: false,
              );
            default:
              return null;
          }
        },
      ),
    );
  },
);

// 弹窗内页面示例
class FirstModalPage extends StatelessWidget {
  final VoidCallback onNavigate;
  const FirstModalPage({super.key, required this.onNavigate});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('首页弹窗'),
        ElevatedButton(onPressed: onNavigate, child: const Text('跳转到第二页')),
      ],
    );
  }
}

注意点：

• 给MaterialPageRoute设置fullscreenDialog: false，避免页面强制全屏
• 可通过MediaQuery动态设置高度，比如maxHeight: MediaQuery.of(context).size.height * 0.7

方案二：替代Navigator.push的局部导航方案 #

如果不想用嵌套Navigator，可以用状态管理+页面容器模拟导航逻辑，比如IndexedStack或PageView，完全在弹窗内部管理页面切换，不需要依赖全局导航方法。

核心思路：用StatefulWidget维护当前显示的页面索引，点击导航按钮时更新索引，实现和Navigator.push一致的体验，且更轻量化。

示例代码：

showModalBottomSheet(
  context: context,
  builder: (context) {
    return _ModalNavigationContainer();
  },
);

class _ModalNavigationContainer extends StatefulWidget {
  @override
  State<_ModalNavigationContainer> createState() => _ModalNavigationContainerState();
}

class _ModalNavigationContainerState extends State<_ModalNavigationContainer> {
  int _currentPageIndex = 0;
  final List<Widget> _pages = [
    _FirstPage(onNavigate: () => setState(() => _currentPageIndex = 1)),
    _SecondPage(onBack: () => setState(() => _currentPageIndex = 0)),
  ];

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 500, // 指定弹窗高度
      child: IndexedStack(
        index: _currentPageIndex,
        children: _pages,
      ),
    );
  }
}

// 子页面示例
class _FirstPage extends StatelessWidget {
  final VoidCallback onNavigate;
  const _FirstPage({required this.onNavigate});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        const Text('第一页'),
        ElevatedButton(onPressed: onNavigate, child: const Text('切换到第二页')),
      ],
    );
  }
}

优势：

• 无需嵌套导航树，避免全局导航冲突
• 完全控制弹窗尺寸，不会出现全屏问题
• 页面切换逻辑直观，适合简单的弹窗内导航场景

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