首页 > 建站教程 > dart >  dart笔记14:flutter上拉刷新下拉加载示例正文

dart笔记14:flutter上拉刷新下拉加载示例

dart笔记14:flutter上拉刷新下拉加载示例,通过RefreshIndicator组件,来监听下拉刷新,重新赋值给liseView,通过listView的controller,监听滚动,判断scrollController.position.pixels == scrollController.position.maxScrollExtent,即是否滚动到底部,来实现上拉加载,注意,在组件dispose时,scrollController也要跟着销毁:
import 'package:flutter/material.dart';
import 'dart:async';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('下拉刷新,上拉加载示例'),
        ),
        body: DroupDownRefresh(),
      ),
    );
  }
}

class DroupDownRefresh extends StatefulWidget {
  @override
  _DroupDownRefresh createState() => _DroupDownRefresh();
}

class _DroupDownRefresh extends State<DroupDownRefresh> {
  List list = List();
  ScrollController scrollController = ScrollController();

  int page = 0;
  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    initData();
    scrollController.addListener(() {
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        print('滑动到底部');
        getMoreData();
      }
    });
  }

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

  Future initData() async {
    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        list = List.generate(15, (i) => '初始数据$i');
      });
    });
  }

  Future onRefreshData() async {
    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        list = List.generate(15, (i) => '刷新后的数据$i');
      });
    });
  }

  Future getMoreData() async {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });
    }

    await Future.delayed(Duration(seconds: 1), () {
      setState(() {
        list.addAll(List.generate(5, (i) => '第$page次上拉的数据'));
        page++;
        isLoading = false;
      });
    });
  }

  Widget renderListItem(BuildContext context, int index) {
    if (index < list.length) {
      return ListTile(
        title: Text(list[index]),
      );
    }
    return showGetMoreWidget();
  }

  Widget showGetMoreWidget() {
    return Center(
      child: Padding(
        padding: EdgeInsets.all(10.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              '加载中..',
              style: TextStyle(fontSize: 16.0),
            ),
            CircularProgressIndicator(
              strokeWidth: 1.0,
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '下拉刷新,上拉加载更多',
          style: TextStyle(color: Colors.black, fontSize: 18.0),
        ),
        centerTitle: true,
        elevation: 0,
        backgroundColor: Color(0xffeded),
      ),
      body: RefreshIndicator(
        onRefresh: onRefreshData,
        child: ListView.builder(
          itemBuilder: renderListItem,
          itemCount: list.length + 1,
          controller: scrollController,
        ),
      ),
    );
  }
}