Flutter路由参数清除问题：页面重建引发无限循环

问题场景 #

扫描条形码后携带参数导航到注册页，在注册页的build方法中读取路由参数并触发对话框；关闭对话框后页面重建，路由参数仍存在，导致对话框反复弹出，形成无限循环。

相关代码：
导航代码：

Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => RegistrationPage(),
      settings: RouteSettings(arguments: code),
   ),
);

注册页读取参数：

Widget build(BuildContext context) {
    String barcode = ModalRoute.of(context).settings.arguments;

    WidgetsBinding.instance.addPostFrameCallback((_){
      if (barcode != null && barcode != "") {
        _idInputControl.text = barcode;
        id = barcode;
        
        askForPersonalNr();
      }
    });
....

问题原因 #

1. 路由参数是路由的固有属性，只要路由存在，参数就不会消失；
2. 将触发对话框的逻辑放在build方法中，而build会在多种场景下被调用（比如关闭对话框后页面可能因状态变化重建），导致每次重建都会读取参数并触发对话框。

解决方案 #

方案一：用状态变量标记已处理参数 #

在页面的State类中添加一个布尔变量，标记参数是否已处理，避免重复触发：

class _RegistrationPageState extends State<RegistrationPage> {
  bool _hasProcessedBarcode = false;
  final TextEditingController _idInputControl = TextEditingController();
  String? id;

  void askForPersonalNr() {
    // 你的对话框逻辑
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text("输入个人编号"),
        // ...对话框内容
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: const Text("取消"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    String? barcode = ModalRoute.of(context)?.settings.arguments as String?;

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (barcode != null && barcode.isNotEmpty && !_hasProcessedBarcode) {
        _idInputControl.text = barcode;
        id = barcode;
        setState(() {
          _hasProcessedBarcode = true;
        });
        askForPersonalNr();
      }
    });

    return Scaffold(
      // 你的页面UI
    );
  }
}

方案二：将参数处理逻辑移到initState #

因为参数只需要处理一次，所以可以把逻辑放在initState中，initState只会在页面初始化时执行一次：

class _RegistrationPageState extends State<RegistrationPage> {
  final TextEditingController _idInputControl = TextEditingController();
  String? id;

  void askForPersonalNr() {
    // 你的对话框逻辑
  }

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      String? barcode = ModalRoute.of(context)?.settings.arguments as String?;
      if (barcode != null && barcode.isNotEmpty) {
        _idInputControl.text = barcode;
        id = barcode;
        askForPersonalNr();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // 仅构建UI，不再处理参数逻辑
    return Scaffold(
      // 你的页面UI
    );
  }
}

方案三：使用状态管理传递参数（推荐复杂场景） #

如果页面逻辑复杂，使用状态管理（如Provider）来传递参数，避免依赖路由参数：

1. 创建Provider类

class MyProvider extends ChangeNotifier {
  String? _barcode;
  bool _hasProcessed = false;

  String? get barcode => _barcode;
  bool get hasProcessed => _hasProcessed;

  void setBarcode(String code) {
    _barcode = code;
    notifyListeners();
  }

  void markAsProcessed() {
    _hasProcessed = true;
    notifyListeners();
  }
}

2. 配置MultiProvider（main.dart）

void main() {
  runApp(
    /// Providers are above [MyApp] instead of inside it, so that tests
    /// can use [MyApp] while mocking the providers
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MyProvider()),
      ],
      child: MyApp(),
    ),
  );
}

3. 扫描后设置参数并导航

// 扫描完成后
Provider.of<MyProvider>(context, listen: false).setBarcode(code);
Navigator.of(context).push(MaterialPageRoute(builder: (context) => RegistrationPage()));

4. 注册页读取并处理参数

class _RegistrationPageState extends State<RegistrationPage> {
  final TextEditingController _idInputControl = TextEditingController();
  String? id;

  void askForPersonalNr() {
    // 你的对话框逻辑
  }

  @override
  Widget build(BuildContext context) {
    final myProvider = Provider.of<MyProvider>(context);
    final barcode = myProvider.barcode;

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (barcode != null && barcode.isNotEmpty && !myProvider.hasProcessed) {
        _idInputControl.text = barcode;
        id = barcode;
        myProvider.markAsProcessed();
        askForPersonalNr();
      }
    });

    return Scaffold(
      // 你的页面UI
    );
  }
}

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