Flutter下拉刷新和上拉加载，助力打造流畅影视App

2023-10-11 09:06:40

在Flutter中，下拉刷新和上拉加载是两个非常重要的功能，可以为用户提供更流畅和便捷的操作体验。本文将以一个电影App客户端案例为例，详细讲解如何实现这两个功能。

下拉刷新

下拉刷新功能可以允许用户在下拉列表时触发刷新操作，以获取最新的数据。在Flutter中，可以使用RefreshIndicator小部件来实现下拉刷新功能。

class RefreshDemo extends StatefulWidget {
  @override
  _RefreshDemoState createState() => _RefreshDemoState();
}

class _RefreshDemoState extends State<RefreshDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: _onRefresh,
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }

  Future<void> _onRefresh() async {
    //模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    //刷新数据
    setState(() {
      //更新数据
    });
  }
}

上拉加载

上拉加载功能可以允许用户在滑动列表到底部时触发加载更多数据的操作。在Flutter中，可以使用ScrollController和NotificationListener小部件来实现上拉加载功能。

class LoadMoreDemo extends StatefulWidget {
  @override
  _LoadMoreDemoState createState() => _LoadMoreDemoState();
}

class _LoadMoreDemoState extends State<LoadMoreDemo> {
  bool _isLoading = false;
  ScrollController _scrollController = ScrollController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NotificationListener<ScrollNotification>(
        onNotification: (notification) {
          if (notification is ScrollEndNotification && _scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
            _loadMore();
          }
          return false;
        },
        child: ListView.builder(
          controller: _scrollController,
          itemCount: 100,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item $index'),
            );
          },
        ),
      ),
    );
  }

  Future<void> _loadMore() async {
    if (_isLoading) {
      return;
    }
    _isLoading = true;
    //模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    //加载更多数据
    setState(() {
      //更新数据
    });
    _isLoading = false;
  }
}