Flutter25.listview下拉刷新

最新推荐文章于 2025-09-05 21:00:00 发布

原创最新推荐文章于 2025-09-05 21:00:00 发布 · 415 阅读

0 ·

CC 4.0 BY-SA版权

Flutter 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一个使用Flutter实现的包含下拉刷新和加载更多功能的示例应用。通过监听ListView的滚动事件，实现当用户滑动到列表底部时自动加载更多数据，并在顶部提供下拉刷新功能以更新列表内容。

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: HomePage(),
));

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

class _HomePageState extends State<HomePage> {
  List list = List();
  ScrollController _scrollController;//监听listview的滑动

  @override
  void initState() {
    super.initState();
    _refresh();
    _scrollController = ScrollController()//监听滑动
      ..addListener(() {
        //判断是否滑到底
        if (_scrollController.position.pixels ==
            _scrollController.position.maxScrollExtent) {
          _loadMore();
        }
      });
  }

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

  Future _loadMore() async {
    await Future.delayed(Duration(seconds: 2), () {
      setState(() {
        list.addAll(
            List.generate(Random().nextInt(5) + 1, (i) => 'more Item $i'));
      });
    });
  }

  Future<void> _refresh() async {
    await Future.delayed(Duration(seconds: 3), () {
      setState(() {
        list = List.generate(Random().nextInt(20) + 15, (i) => 'Item $i');
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull Refresh'),
      ),
      body: Center(
        child: RefreshIndicator(//下拉刷新
            displacement: 10.0,
            child: list == null || list.isEmpty
                ? Center(
              child: CircularProgressIndicator(),//没有数据就转圈
            )
                : ListView.builder(
                controller: _scrollController,
                itemCount: list.length + 1,
                itemBuilder: (context, index) {
                  if(index == list.length){
                    return Padding(
                      padding: const EdgeInsets.all(10.0),
                      child: Center(
                        child: CircularProgressIndicator(),
                      ),
                    );
                  }
                  return ListTile(
                    title: Text(list[index]),
                  );
                }),
            onRefresh: _refresh),
      ),
    );
  }
}

输出：