flutter - 刷新按钮的正确实现

问题描述

这似乎是一个简单的问题（也许确实如此），但我是 Flutter 的新手，我找不到实现此功能的正确方法。

我在CupertinoPageScaffold. 脚手架位于CupertinoNavigationBar具有CupertinoButton“刷新”按钮的内部。

小部件具有FutureBuilder异步构建内容的功能。

通过按下这个按钮，我想刷新脚手架内小部件的状态。

按钮当然有onPressed()闭包，但我不明白按钮如何与小部件的状态交互（实际上，setState()应该只在小部件的状态本身内调用）。

+---------------------------+
|  Refresh                  |
|  Button+-----------------------------+
+---------------------------+          |
|                           |          |
|  +--Stateful Widget+---+  |          |
|  |                     |  |          |
|  | +----------------+  |  |          |
|  | |                |  |  |          |
|  | |                |  |  |          |
|  | |                |  |  |          |
|  | |    State       |  |  |          |
|  | |     &          |  |  |          |
|  | |    Future    <------------------+
|  | |    Builder     |  |  |
|  | |                |  |  |
|  | |                |  |  |
|  | |                |  |  |
|  | +----------------+  |  |
|  |                     |  |
|  +---------------------+  |
|                           |
+---------------------------+

如何实现此刷新按钮的正确方法？

编辑

目前这就是我所拥有的：

class PostListScaffold extends StatelessWidget {

  final CategoryMetadata category;

  PostListScaffold({this.category});

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Image(image: AssetImage("assets/logo.png")),
        heroTag: "post_list",
        transitionBetweenRoutes: false,
        actionsForegroundColor: MyColors.mainColor,
      ),
      child: PostsTableList(category)
      );
  }
}

class PostsTableList extends StatefulWidget {

  final CategoryMetadata category;

  PostsTableList(this.category);

  @override
  PostsTableListState createState() => PostsTableListState(category: category);
}

以及使用 a 构建列表的状态FutureBuilder：

class PostsTableListState extends State<PostsTableList> {
  final CategoryMetadata category;
  int _currentPaginationIndex = 1;
  final _apiPosts = APIPost.standard();

  PostsTableListState({this.category});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: FutureBuilder(
            future: _getCall(_currentPaginationIndex),
            builder: (context, AsyncSnapshot<List<PostMetadata>> snapshot) =>
                _buildListWhenAvailable(context, snapshot)
          )
    );
  }

  Widget _buildListWhenAvailable(BuildContext context, AsyncSnapshot<List<PostMetadata>> snapshot) {

    switch (snapshot.connectionState) {
      case ConnectionState.active: {
        return CupertinoActivityIndicator();
      } break;
      case ConnectionState.done: {
        if (snapshot.data == null || snapshot.data.length == 0) {
          return EmptyDataRefresh("No post available. Try to refresh",
          onRefresh: () {
            this.setState(() {});
          });
        } else {
          return ListView(children: _getListData(context, snapshot));
        }
      } break;
      case ConnectionState.none: {
        return EmptyDataRefresh("No post available. Try to refresh",
          onRefresh: () {
            this.setState(() {});
        });
      } break;
      case ConnectionState.waiting: {
        return CupertinoActivityIndicator();
      }
    }

    return Text("Errore sconosciuto. Provare di nuovo");

  }

  Future<List<PostMetadata>> _getCall(int paginationIndex) {
    if (category == null) {
      return _apiPosts.fetchPostMetadata(_currentPaginationIndex);
    } else {
      return _apiPosts.fetchPostsWithCategoryID(
          this.category.id); // For now this call doesn't support pagination
    }
  }

  List<Widget> _getListData(
      BuildContext context, AsyncSnapshot<List<PostMetadata>> snapshot) {
    List<Widget> widgets = [];

    for (var post in snapshot.data) {
      widgets.add(PostRow(post: post));
    }

    return widgets;
  }
}

标签： flutter

flutter - 刷新按钮的正确实现

问题描述

解决方案

推荐阅读