时间戳

首页 > 解决方案 > 在 Flutter 有状态小部件中使用 FutureBuilder 和 RefreshIndicator

flutter - 在 Flutter 有状态小部件中使用 FutureBuilder 和 RefreshIndicator

问题描述

我有一个 Flutter 小部件，它从服务器获取数据并呈现一个列表。获取数据后，我解析数据并将其转换为应用程序中的内部对象，因此函数如下所示：

Future<List<Data>> getData(Thing thing) async {
  var response = await http.get(Uri.parse(MY_URL));
  // do some processing
  return data;
}

之后，我定义了一个有状态的小部件，它调用这个函数并使用未来来呈现一个列表。

class DataList extends StatefulWidget {
  const DataList({Key key}) : super(key: key);

  @override
  _DataListState createState() => _DataListState();
}

class _DataListState extends State<DataList> {
  Widget createListView(BuildContext context, AsyncSnapshot snapshot) {
    List<Data> values = snapshot.data;

    if (values.isEmpty) {
      return NoResultsWidget('No results.');
    }

    return ListView.builder(
      itemCount: values.length,
      itemBuilder: (BuildContext context, int index) {
        return values[index];
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    var data = getSomething().then((thing) => getData(thing));

    return FutureBuilder(
      future: data,
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
            return CustomErrorWidget('Error');
          case ConnectionState.waiting:
            return LoadingWidget();
          default:
            if (snapshot.hasError) {
              return CustomErrorWidget('Error.');
            } else {
              return createListView(context, snapshot);
            }
        }
      },
    );
  }
}

现在，代码以这种方式工作得很好。但是，当我尝试将我的数据移动为通过 initState 方法更新的类变量（Future<List> 类型）时，该变量永远不会更新。下面的示例代码：

class _DataListState extends State<DataList> {
  Future<List<Data>> data;

  ....

  @override
  void initState() {
    super.initState();
    updateData();
  }

  void updateData() {
    data = getSomething().then((thing) => getData(thing));
  }

  ....

}

我想添加一个刷新指示器以在刷新时更新数据，为此我需要将我的数据设为类变量以在刷新时对其进行更新，但我似乎无法弄清楚如何使我的数据成为有状态小部件的状态并让它工作。任何有关 github 代码示例的帮助或指南将不胜感激。

标签： flutter

解决方案

您需要包装data变量的赋值，setState以便 Flutter 知道变量已更改并重建您的小部件。

例如：

  void updateData() {
    setState(() {
        data = getSomething().then((thing) => getData(thing));
    });
  }

推荐阅读