Flutter 设置状态未使用新数据更新我的 UI

Question

我有一个 ListView.builder 小部件包裹在一个 RefreshIndicator 中，然后是一个 FutureBuilder。刷新不会更新我的列表，我必须关闭应用程序并再次打开它，但刷新代码与我的FutureBuilder 相同。

请在下面查看我的代码，当我阅读它时，我希望小部件树肯定会更新。

@override
void initState() {
  super.initState();
  taskListFuture= TaskService().getTasks();
}

@override
  Widget build(BuildContext context) {
    return Consumer<TaskData>(builder: (context, taskData, child) {
      return FutureBuilder(
          future: taskListFuture,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.done) {
              taskData.tasks = (snapshot.data as ApiResponseModel).responseBody;
              return RefreshIndicator(
                onRefresh: () async {
                  var responseModel = await TaskService().getTasks();
                  setState(() {
                    taskData.tasks = responseModel.responseBody;
                  });
                },
                child: ListView.builder(
...
...

如果需要更多代码，请告诉我，提前致谢！

积分

• 我正在使用 StatefulWidget
• 任务数据是一个扩展 ChangeNotifier 的类
• 调试刷新时，我可以在列表中看到新数据，但 UI 没有更新

getTasks()

  Future<ApiResponseModel> getTasks() async {
    try {
      var _sharedPreferences = await SharedPreferences.getInstance();
      var userId = _sharedPreferences.getString(PreferencesModel.userId);

      var response = await http.get(
        Uri.parse("$apiBaseUrl/$_controllerRoute?userId=$userId"),
        headers: await authorizeHttpRequest(),
      );

      var jsonTaskDtos = jsonDecode(response.body);
      var taskDtos= List<TaskDto>.from(
          jsonTaskDtos.map((jsonTaskDto) => TaskDto.fromJson(jsonTaskDto)));
      return ApiResponseModel(
          responseBody: taskDtos,
          isSuccessStatusCode: isSuccessStatusCode(response.statusCode));
    } catch (e) {
      return null;
    }
  }

Answer 1

这里的问题似乎是您正在更新一个不属于 StatefulWidget 状态的属性。

setState(() {
  taskData.tasks = responseModel.responseBody;
});

这设置了TaskData 的属性部分。 我的建议是只使用Consumer 并重构TaskService，以便它控制TaskData 或类似的列表。比如：

提供者

class TaskService extends ChangeNotifier {
  List<TaskData> _data;

  load() async {
    this.data = await _fetchData();
  }

  List<TaskData> get data => _data;

  set data(List<TaskData> data) {
    _data = data;
    notifyListeners();
  }
}

小部件

class MyTaskList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<TaskService>(builder: (context, service, child) {
      return RefreshIndicator(
          onRefresh: () {
            service.getTasks();
          },
          child: ListView.builder(
                   itemCount: service.data.length,
                   itemBuilder: (BuildContext context, int index) {
                     return MyTaskItem(data:service.data[index]);
                   },
                 ),
         ); 
    });
  }
}

并确保在 service.getTasks() 方法中调用 notifyListeners() 以使 Consumer 重建

Answer 2

我认为（如果我错了，有人会纠正我）问题是您使用的是FutureBuilder，一旦它构建完成，您需要刷新整个小部件以便 FutureBuilder 收听更改。我可以建议一个StreamBuilder 来监听数据模型/api/任何类型的数据流提供的任何更改。或者更好的是，您可以使用某种状态管理，例如 Provider，并使用 Provider 包中的 Consumer 来通知小部件可能发生的任何更改。