Flutter如何在同一模态底部弹窗内推送新页面？

你的问题根源在于每次跳转都新弹出一个底部弹窗，导致多个弹窗堆叠。下面提供几种可行的解决方案，实现类似Navigator.push()的页面切换体验，同时避免弹窗堆叠：

方法一：关闭当前弹窗后打开新弹窗 #

在PhoneAuthScreen中触发验证码页面跳转时，先关闭当前的底部弹窗，再打开新的验证码弹窗。这样就不会出现堆叠，用户返回登录页只需关闭一次弹窗。

修改PhoneAuthScreen中的跳转代码：

// 先关闭当前底部弹窗
Navigator.of(context).pop();
// 再打开验证码验证弹窗
showBarModalBottomSheet(
  context: context,
  builder: (context) => OTPValidationScreen(phoneNumber: phone),
);

如果遇到context无法正确关闭弹窗的情况，可以尝试使用Navigator.of(context, rootNavigator: true).pop()，确保关闭的是最上层的弹窗实例。

方法二：在单个底部弹窗内嵌入Navigator #

将整个手机号验证+验证码验证流程放在同一个底部弹窗中，通过弹窗内部的Navigator组件实现页面切换，完全避免弹窗堆叠。

1. 创建统一的弹窗容器页面 #

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

  @override
  Widget build(BuildContext context) {
    return Navigator(
      initialRoute: '/phone-input',
      onGenerateRoute: (settings) {
        Widget targetPage;
        switch (settings.name) {
          case '/phone-input':
            targetPage = PhoneAuthScreen(
              onPhoneSubmitted: (phone) {
                Navigator.of(context).pushNamed('/otp-verify', arguments: phone);
              },
            );
            break;
          case '/otp-verify':
            final phone = settings.arguments as String;
            targetPage = OTPValidationScreen(
              phoneNumber: phone,
              onVerificationSuccess: () {
                // 验证完成后关闭整个底部弹窗
                Navigator.of(context).pop();
              },
            );
            break;
          default:
            targetPage = const SizedBox.shrink();
        }
        return MaterialPageRoute(builder: (context) => targetPage);
      },
    );
  }
}

2. 修改PhoneAuthScreen，用回调替代弹窗跳转 #

给PhoneAuthScreen添加回调参数，移除原来的弹窗触发代码：

class PhoneAuthScreen extends StatelessWidget {
  final Function(String phone) onPhoneSubmitted;
  
  const PhoneAuthScreen({super.key, required this.onPhoneSubmitted});

  // ... 页面其他代码

  // 提交手机号时触发回调
  void _handlePhoneSubmit(String phone) {
    onPhoneSubmitted(phone);
  }
}

3. 在LoginScreen中打开统一弹窗 #

showBarModalBottomSheet(
  context: context,
  builder: (context) => const AuthBottomSheet(),
);

这样整个流程都在同一个弹窗内完成，用户返回时只需关闭一次，完全模拟原生导航的跳转体验。

方法三：用PageView实现轻量页面切换 #

如果你的流程只有两步（手机号输入→验证码验证），可以用PageView实现弹窗内的页面切换，方案更轻量：

class AuthBottomSheet extends StatefulWidget {
  const AuthBottomSheet({super.key});

  @override
  State<AuthBottomSheet> createState() => _AuthBottomSheetState();
}

class _AuthBottomSheetState extends State<AuthBottomSheet> {
  final PageController _pageController = PageController();
  String? _phoneNumber;

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _pageController,
      physics: const NeverScrollableScrollPhysics(), // 禁止滑动，仅通过按钮切换
      children: [
        PhoneAuthScreen(
          onPhoneSubmitted: (phone) {
            setState(() {
              _phoneNumber = phone;
            });
            _pageController.nextPage(
              duration: const Duration(milliseconds: 300),
              curve: Curves.easeInOut,
            );
          },
        ),
        if (_phoneNumber != null)
          OTPValidationScreen(
            phoneNumber: _phoneNumber!,
            onBackTap: () {
              _pageController.previousPage(
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              );
            },
          ),
      ],
    );
  }
}

这种方式不需要额外的Navigator配置，适合简单的两步流程。

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