Flutter无状态组件中ChangeNotifierProvider弹窗重复显示问题求解

问题根源 #

直接在build方法中调用弹窗逻辑是错误的——build会因组件初始化、父组件重建、状态变化等多种原因多次执行，每次都会触发弹窗；而StatelessWidget的临时标记会随build重置，无法生效。

正确实现方式 #

将StatelessWidget改为StatefulWidget，利用生命周期方法控制弹窗触发时机，结合状态变量确保只弹窗一次：

1. 转为StatefulWidget并添加状态标记 #

在State类中定义布尔变量，记录是否已经弹出过初始化对话框，避免重复触发。

2. 在生命周期方法中判断并触发弹窗 #

使用didChangeDependencies（而非build）检查待办列表状态，该方法在组件初始化和依赖变化时执行，能安全获取Provider中的数据。同时用addPostFrameCallback确保build完成后再弹窗，避免context异常。

完整代码示例 #

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

  @override
  State<TodoPage> createState() => _TodoPageState();
}

class _TodoPageState extends State<TodoPage> {
  // 标记是否已弹出初始化对话框
  bool _hasShownInitialDialog = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 不监听状态变化，仅获取当前TodoList实例
    final todoList = Provider.of<TodoList>(context, listen: false);
    
    // 仅在待办为空且未弹窗时触发
    if (todoList.todos.isEmpty && !_hasShownInitialDialog) {
      _hasShownInitialDialog = true;
      // 等待当前build周期完成后再弹窗
      WidgetsBinding.instance.addPostFrameCallback((_) {
        _showAddTodoDialog(context, todoList);
      });
    }
  }

  void _showAddTodoDialog(BuildContext context, TodoList todoList) {
    showDialog(
      context: context,
      barrierDismissible: false, // 可选：强制用户输入或取消
      builder: (dialogContext) => AlertDialog(
        title: const Text('添加你的第一个待办'),
        content: TextField(
          autofocus: true,
          decoration: const InputDecoration(hintText: '输入待办内容'),
          onSubmitted: (value) {
            if (value.trim().isNotEmpty) {
              todoList.addTodo(value.trim());
              Navigator.of(dialogContext).pop();
            }
          },
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(dialogContext).pop(),
            child: const Text('取消'),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final todoList = Provider.of<TodoList>(context);
    return todoList.todos.isEmpty
        ? const Center(child: Text('暂无待办事项'))
        : ListView.builder(
            itemCount: todoList.todos.length,
            itemBuilder: (ctx, index) => ListTile(
              title: Text(todoList.todos[index].title),
            ),
          );
  }
}

关键细节说明 #

• listen: false：获取TodoList时不监听状态变化，避免待办列表更新时重复触发didChangeDependencies。
• _hasShownInitialDialog：作为State成员变量，不会随build重置，确保仅弹窗一次。
• addPostFrameCallback：等待当前UI构建完成后再执行弹窗，避免在build过程中操作context导致的异常。

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