Flutter中StateNotifierProvider跨页面状态不持久问题排查

核心问题分析 #

1. UI输入框未与控制器/焦点节点绑定：代码中定义了_recipeName、_postDesc等控制器和对应的FocusNode，但build方法里的CEditText组件未传入这些参数，导致用户输入无法触发状态更新逻辑。
2. 未监听状态变化同步UI：从其他页面返回时，即使状态有值，UI也不会自动更新，因为没有监听postFormProvider的状态变化来同步控制器文本。

修复步骤 #

1. 绑定输入框与控制器、焦点节点 #

修改PostScreen的build方法，为每个CEditText传入对应参数：

// 食谱名称输入框
CEditText(
  hinText: "Add recipe name..",
  editTextHeight: 30,
  editTextWidth: screenWidth * 0.7,
  maxLines: 1,
  controller: _recipeName, // 绑定控制器
  focusNode: _recipeNameFocus, // 绑定焦点节点
),
// 帖子描述输入框
CEditText(
  hinText: "Add a post description..",
  editTextHeight: 60,
  editTextWidth: screenWidth,
  maxLines: 2,
  controller: _postDesc,
  focusNode: _postDescriptionFocus,
),
// 标签输入框
CEditText(
  hinText: "Add 4-5 tags..",
  editTextHeight: 60,
  editTextWidth: screenWidth,
  maxLines: 2,
  controller: _postTags,
  focusNode: _postTagsFocus,
),

2. 监听状态变化同步UI #

在build方法中添加状态监听，同步控制器文本（避免重复更新）：

@override
Widget build(BuildContext context) {
  // 监听表单状态变化
  final postFormState = ref.watch(postFormProvider);
  
  // 同步控制器内容，仅当文本不同时更新
  if (_recipeName.text != postFormState.recipeName) {
    _recipeName.text = postFormState.recipeName;
  }
  if (_postDesc.text != postFormState.description) {
    _postDesc.text = postFormState.description;
  }
  final tagsText = postFormState.tags.join(" ");
  if (_postTags.text != tagsText) {
    _postTags.text = tagsText;
  }
  
  // 原build方法剩余代码...
}

3. 优化状态更新逻辑（可选） #

可替换焦点监听为实时文本监听，提升体验：

@override
void initState() {
  super.initState();
  
  // 实时监听文本变化更新状态
  _recipeName.addListener(() {
    if (_recipeName.text.isNotEmpty) {
      ref.read(postFormProvider.notifier).updateRecipeName(_recipeName.text);
    }
  });
  
  _postDesc.addListener(() {
    if (_postDesc.text.isNotEmpty) {
      ref.read(postFormProvider.notifier).updatePostDescription(_postDesc.text);
    }
  });
  
  _postTags.addListener(() {
    if (_postTags.text.isNotEmpty) {
      ref.read(postFormProvider.notifier).updatePostTags(_postTags.text);
    }
  });
  
  // 原initState剩余代码...
}

// 移除原FocusListener相关的handle方法和dispose中的移除监听逻辑

验证要点 #

• 跳转至/recipe/add页面后返回，检查表单输入框是否保留之前的内容
• 修改表单内容后，通过打印ref.read(postFormProvider)确认状态已同步更新

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