Flutter中能否锁定屏幕或对话框，完成指定操作前禁止返回上页？

当然可以实现，核心思路是拦截返回操作+阻止用户交互，直到满足特定条件（比如网络恢复）。以下是两种常用的实现方式：

1. 不可关闭的模态对话框+返回键拦截 #

通过showDialog创建无法点击遮罩关闭的对话框，同时用WillPopScope拦截物理返回键，在条件未满足时阻止页面返回：

class LockedPage extends StatefulWidget {
  @override
  State<LockedPage> createState() => _LockedPageState();
}

class _LockedPageState extends State<LockedPage> {
  bool isNetworkConnected = false;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        // 检查网络状态，未恢复时阻止返回并显示锁定对话框
        if (!isNetworkConnected) {
          showDialog(
            context: context,
            barrierDismissible: false, // 点击遮罩不关闭对话框
            builder: (_) => AlertDialog(
              title: const Text('网络异常'),
              content: const Text('请等待网络恢复后再操作'),
              // 不提供关闭按钮，直到网络恢复后通过代码关闭
            ),
          );
          return false; // 阻止页面返回
        }
        return true; // 允许返回
      },
      child: Scaffold(
        appBar: AppBar(title: const Text('测试页面')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 模拟网络恢复
              setState(() => isNetworkConnected = true);
              // 关闭对话框
              Navigator.of(context).pop();
            },
            child: const Text('模拟网络恢复'),
          ),
        ),
      ),
    );
  }
}

2. 全屏遮罩层+返回键拦截 #

如果需要更自定义的锁定界面，可以用Stack添加全屏遮罩层，配合WillPopScope拦截返回：

class FullScreenLockPage extends StatefulWidget {
  @override
  State<FullScreenLockPage> createState() => _FullScreenLockPageState();
}

class _FullScreenLockPageState extends State<FullScreenLockPage> {
  bool isNetworkConnected = false;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => isNetworkConnected, // 仅当网络恢复时允许返回
      child: Stack(
        children: [
          // 原页面内容
          Scaffold(
            appBar: AppBar(title: const Text('全屏锁定测试')),
            body: const Center(child: Text('页面内容')),
          ),
          // 网络未恢复时显示全屏遮罩
          if (!isNetworkConnected)
            Container(
              color: Colors.black54,
              child: const Center(
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    CircularProgressIndicator(),
                    SizedBox(height: 16),
                    Text('网络恢复中，请稍候...'),
                  ],
                ),
              ),
            ),
        ],
      ),
    );
  }
}

关键注意点 #

• barrierDismissible: false确保用户无法通过点击对话框遮罩关闭界面
• WillPopScope的onWillPop返回false时，会拦截Android物理返回键和iOS的侧滑返回
• 当特定条件满足（比如网络恢复）时，需要手动更新状态并关闭对话框/移除遮罩，允许用户返回

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