首页 > 解决方案 > 后台数据更改时如何刷新 ListView.Builder?

问题描述

我有一个ListView从 API 获取数据的 API,API 调用首先来自initState()并分配给List<DataFromApi> dataFromApi = [];. 在某个时间再次对同一个 API 进行后台调用后,我正在获取数据并分配给同一个dataFromApi列表

setState(() {
  dataFromApi = [];
  for (DataFromApi td in resData.data) {
    dataFromApi.add(td);
  }
});

记录它时,数据会更改,但 UI 不会更改。如何更新 ListView?

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
    List<DataFromApi> dataFromApi = [];

  @override
  void initState() {
    loadData();
    super.initState();
    fetchFirstData();
    initTimedDataCall();
  }

  initTimedDataCall() {
    Timer.periodic(Duration(minutes: 5), (timer) {
      setState(() {
        timedCall();
      });
    });
  }
  
  fetchFirstData() async {
    final response = await http.get(
      Utils.getDataUrl,
    );
    if (response.statusCode == 200) {
      final resData = DataListFromJson(response.body);
      if (resData.status == 1) {
        print(response.body);
        setState(() {
          dataFromApi = [];
          for (DataFromApi td in resData.data) {
            dataFromApi.add(td);
          }
        });
      }
      ///
      ///
      /// DOING SOME MORE THINGS IN FIRST CALL
      ///
      ///
    }
  }

  timedCall() async {
    final response = await http.get(
      Utils.getDataUrl,
    );
    if (response.statusCode == 200) {
      final resData = DataListFromJson(response.body);
      if (resData.status == 1) {
        print(response.body);
        setState(() {
          dataFromApi = [];
          for (DataFromApi td in resData.data) {
            dataFromApi.add(td);
          }
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView.builder(
            itemCount: dataFromApi.length,
            itemBuilder: (context, index) {
                return Text('${dataFromApi[index].title}');
            }
            ),
    );
  }


}

标签: flutter

解决方案


setState计算完成后尝试调用

 timedCall() async {
    final response = await http.get(
      Utils.getDataUrl,
    );
    if (response.statusCode == 200) {
      final resData = DataListFromJson(response.body);
      if (resData.status == 1) {
        print(response.body);
          dataFromApi = [];
          for (DataFromApi td in resData.data) {
            dataFromApi.add(td);
          }
        setState(() {
        });
      }
    }
  }

对其他方法使用类似。这对我有用


推荐阅读