Flutter读取备份数据后需手动刷新展示，能否不使用FutureBuilder？

当然可以，不用FutureBuilder也能实现页面加载时自动获取数据并刷新UI，下面是两种实用的实现方式：

方法一：在页面初始化时异步加载并更新状态 #

这是最直接的方案，利用StatefulWidget的initState生命周期方法，在页面创建时自动触发数据加载，获取到数据后通过setState更新状态，UI会自动重建并渲染列表。

示例代码：

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

  @override
  State<RestoreBackupPage> createState() => _RestoreBackupPageState();
}

class _RestoreBackupPageState extends State<RestoreBackupPage> {
  List<Note> _backupNotes = [];
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    // 页面初始化时立即加载备份数据
    _fetchAndUpdateNotes();
  }

  // 封装异步加载逻辑
  Future<void> _fetchAndUpdateNotes() async {
    try {
      // 调用你已实现的fetchNotes方法
      final notes = await fetchNotes();
      // 获取数据后更新状态，触发UI刷新
      setState(() {
        _backupNotes = notes;
        _isLoading = false;
      });
    } catch (error) {
      // 处理加载失败的情况，比如提示用户
      setState(() {
        _isLoading = false;
      });
      debugPrint('加载备份数据出错: $error');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('恢复备份数据')),
      body: _isLoading
          ? // 加载中显示进度指示器
          const Center(child: CircularProgressIndicator())
          : // 数据加载完成后渲染列表
          ListView.builder(
              itemCount: _backupNotes.length,
              itemBuilder: (context, index) {
                final note = _backupNotes[index];
                return ListTile(
                  title: Text(note.title),
                  subtitle: Text(note.content),
                  trailing: IconButton(
                    icon: const Icon(Icons.restore),
                    onPressed: () => _handleRestore(note),
                  ),
                );
              },
            ),
    );
  }

  // 实现恢复单条笔记的逻辑
  void _handleRestore(Note note) {
    // 你的恢复代码
  }
}

说明：

• initState是页面初始化时执行的同步方法，我们在里面调用异步的_fetchAndUpdateNotes，避免阻塞UI初始化
• 加入_isLoading状态，用来显示加载中状态，提升用户体验
• 获取到数据后调用setState，框架会自动重新执行build方法，渲染最新的列表数据

方法二：使用状态管理类（适合复杂场景） #

如果你的页面逻辑复杂，或者需要在多个页面共享备份数据状态，可以用ChangeNotifier来管理状态，数据更新时自动通知UI刷新，不需要手动调用setState。

1. 创建状态管理类 #

class BackupNoteProvider extends ChangeNotifier {
  List<Note> _notes = [];
  bool _isLoading = true;

  List<Note> get notes => _notes;
  bool get isLoading => _isLoading;

  Future<void> loadBackupNotes() async {
    try {
      _notes = await fetchNotes();
      _isLoading = false;
      // 通知所有监听的UI组件更新
      notifyListeners();
    } catch (error) {
      _isLoading = false;
      notifyListeners();
      debugPrint('加载备份失败: $error');
    }
  }
}

2. 在页面中使用状态管理 #

// 记得先在父级或MaterialApp中注册Provider
class RestoreBackupPage extends StatefulWidget {
  const RestoreBackupPage({super.key});

  @override
  State<RestoreBackupPage> createState() => _RestoreBackupPageState();
}

class _RestoreBackupPageState extends State<RestoreBackupPage> {
  @override
  void initState() {
    super.initState();
    // 获取Provider实例并触发数据加载
    final provider = Provider.of<BackupNoteProvider>(context, listen: false);
    provider.loadBackupNotes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('恢复备份')),
      body: Consumer<BackupNoteProvider>(
        builder: (context, provider, child) {
          if (provider.isLoading) {
            return const Center(child: CircularProgressIndicator());
          }
          return ListView.builder(
            itemCount: provider.notes.length,
            itemBuilder: (context, index) {
              final note = provider.notes[index];
              return ListTile(
                title: Text(note.title),
                subtitle: Text(note.content),
                trailing: IconButton(
                  icon: const Icon(Icons.restore),
                  onPressed: () => _restoreNote(note),
                ),
              );
            },
          );
        },
      ),
    );
  }

  void _restoreNote(Note note) {
    // 恢复逻辑
  }
}

说明：

• 状态管理类封装了数据加载和状态更新逻辑，UI组件只需要监听状态变化
• notifyListeners()会自动触发所有监听该Provider的UI组件重建，无需手动调用setState

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