Flutter从API取数后无法自动更新UI的问题咨询

问题根源 #

你当前的实现存在两个核心问题：

1. FutureBuilder：如果直接在build方法中调用fetchUsers()，它只会在页面初始化时执行一次，创建用户后没有触发重新获取数据的逻辑，自然不会更新UI。
2. StreamBuilder：fetchUsers().asStream()只是将单个Future转为一次性流，仅发送一次数据，创建用户后没有新数据注入流，所以UI不会刷新。

下面提供两种可行的解决方案：

方法一：StatefulWidget配合FutureBuilder手动刷新 #

通过在State类中维护Future变量，创建用户后手动触发重新获取数据并更新状态。

1. 修改页面State类 #

class _UserManagePageState extends State<UserManagePage> {
  late Future<List<User>> _usersFuture;

  @override
  void initState() {
    super.initState();
    _usersFuture = fetchUsers(); // 初始化加载用户数据
  }

  // 重新加载用户数据的方法
  void _refreshUsers() {
    setState(() {
      _usersFuture = fetchUsers(); // 重新调用API，更新Future触发UI重建
    });
  }

  // ...其他页面逻辑
}

2. 更新FutureBuilder #

FutureBuilder<List<User>>(
  future: _usersFuture, // 使用State中维护的Future变量
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: [
          PaginatedDataTable(
            // ...原有配置不变
            source: dataSource(snapshot.data!, context, _refreshUsers), // 传递刷新方法
          )
        ],
      );
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }
    return const Center(child: CircularProgressIndicator());
  },
)

3. 修改MyTable和数据源方法 #

// 修改dataSource方法
DataTableSource dataSource(List<User> userList, BuildContext context, VoidCallback onRefresh) =>
    MyTable(datasList: userList, context: context, onRefresh: onRefresh);

// 修改MyTable类
class MyTable extends DataTableSource {
  MyTable({
    required this.datasList,
    required this.context,
    required this.onRefresh, // 添加刷新回调
  });
  final List<User> datasList;
  final BuildContext context;
  final VoidCallback onRefresh;

  Widget Button(String title, Color color, String id) {
    return MaterialButton(
      onPressed: () async {
        // 等待创建用户完成后刷新数据
        await createUser("name2", "user2", "email2@email.com", "password", "Admin");
        onRefresh(); // 触发UI刷新
      },
      child: Text(
        title,
        style: const TextStyle(color: Colors.white),
      ),
      color: color,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
    );
  }

  // ...原有getRow等方法不变
}

方法二：使用StreamController管理数据流 #

通过StreamController主动向流中发送更新后的用户数据，让StreamBuilder自动监听并刷新UI。

1. 修改页面State类 #

class _UserManagePageState extends State<UserManagePage> {
  final StreamController<List<User>> _usersController = StreamController<List<User>>();

  @override
  void initState() {
    super.initState();
    _loadUsers(); // 初始化加载数据
  }

  // 加载用户数据并发送到流中
  Future<void> _loadUsers() async {
    final users = await fetchUsers();
    _usersController.add(users);
  }

  @override
  void dispose() {
    _usersController.close(); // 页面销毁时关闭控制器，避免内存泄漏
    super.dispose();
  }

  // ...其他页面逻辑
}

2. 更新StreamBuilder #

StreamBuilder<List<User>>(
  stream: _usersController.stream, // 监听控制器的流
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Column(
        children: [
          PaginatedDataTable(
            // ...原有配置不变
            source: dataSource(snapshot.data!, context, _loadUsers), // 传递加载方法
          )
        ],
      );
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }
    return const Center(child: CircularProgressIndicator());
  },
)

3. 修改MyTable的按钮点击逻辑 #

onPressed: () async {
  await createUser("name2", "user2", "email2@email.com", "password", "Admin");
  _loadUsers(); // 重新加载数据并发送到流中，触发UI更新
},

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