颤振下拉刷新似乎有效，但它不刷新

Question

我是 Flutter 的初学者，我已经为这个问题苦苦挣扎了一段时间。

我制作了一个从 wordpress 网站获取帖子的 Flutter 应用。一切正常，除了刷新。它似乎工作（至少指示器工作），但它不会在后台更新，我不知道问题可能出在哪里。

请查看我的 posts_list.dart 文件：

import 'package:wordpress_flutter/widgets/refresh_widget.dart';
import '../model/post_entity.dart';
import '../network/wp_api.dart';
import '../widgets/post_list_item.dart';
import '../widgets/refresh_widget.dart';

class PostsList extends StatefulWidget {
  int category = 0;
  PostsList({this.category = 0});
  @override
  _PostsListState createState() => _PostsListState();
}

class _PostsListState extends State<PostsList> {
  final keyRefresh = GlobalKey<RefreshIndicatorState>();
  List<PostEntity> posts = [];

  int page = 0;
  ScrollController _scrollController = new ScrollController();
  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    getData();
    _scrollController.addListener(() {
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent) {
        getData();
      }
    });
  }

  Future getData() async {
    keyRefresh.currentState?.show();
    if (!isLoading) {
      setState(() {
        page++;
        isLoading = true;
      });

      WpApi.getPostsList(category: widget.category, page: page).then((_posts) {
        setState(() {
          isLoading = false;
          posts.addAll(_posts);
        });
      });
    }
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => SizedBox(
        height: 300,
        child: buildList(),
      );

  Widget buildList() => posts.isEmpty
      ? Center(child: CircularProgressIndicator())
      : RefreshWidget(
          keyRefresh: keyRefresh,
          onRefresh: getData,
          child: ListView.builder(
              itemCount: posts.length + 1,
              shrinkWrap: true,
              primary: false,
              controller: _scrollController,
              itemBuilder: (context, index) {
                if (index == posts.length) {
                  return _buildProgressIndicator();
                } else {
                  return PostListItem(posts[index]);
                }
              }));

  Widget _buildProgressIndicator() {
    return new Padding(
      padding: const EdgeInsets.all(20.0),
      child: Center(
        child: Visibility(
          visible: isLoading,
          child: CircularProgressIndicator(
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

这是 refresh_widget.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class RefreshWidget extends StatefulWidget {
  final GlobalKey<RefreshIndicatorState> keyRefresh;
  final Widget child;
  final Future Function() onRefresh;

  const RefreshWidget({
    Key key,
    this.keyRefresh,
    @required this.onRefresh,
    @required this.child,
  }) : super(key: key);

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

class _RefreshWidgetState extends State<RefreshWidget> {
  @override
  Widget build(BuildContext context) =>
      Platform.isAndroid ? buildAndroidList() : buildIOSList();

  Widget buildAndroidList() => RefreshIndicator(
        key: widget.keyRefresh,
        onRefresh: widget.onRefresh,
        child: widget.child,
      );

  Widget buildIOSList() => CustomScrollView(
        physics: BouncingScrollPhysics(),
        slivers: [
          CupertinoSliverRefreshControl(onRefresh: widget.onRefresh),
          SliverToBoxAdapter(child: widget.child),
        ],
      );
}

Answer 1

您绝对应该查看名为pull_to_refresh 的包。很有帮助。

根据我的观察，您的问题可能是您将获得的所有帖子添加到 posts 列表中。相反，请尝试用传入列表替换列表。您的方式只能在第一次使用，因为最初 posts 列表是空的。但是，下一次，它只会在您从 initState 获得的所有帖子中添加另一个帖子列表。

Future getData() async {
    keyRefresh.currentState?.show();
    if (!isLoading) {
      setState(() {
        page++;
        isLoading = true;
      });

      WpApi.getPostsList(category: widget.category, page: page).then((_posts) {
        setState(() {
          isLoading = false;
          posts = _posts
        });
      });
    }
  }