listview的使用(下拉刷新/上拉加载更多)

下拉刷新控件:RefreshIndicator

const RefreshIndicator({
    Key key,
    @required this.child,
    this.displacement = 40.0,//下拉展示距离
    @required this.onRefresh,//刷新回调
    this.color,//刷新进度颜色
    this.backgroundColor,//背景颜色
    this.notificationPredicate = defaultScrollNotificationPredicate,
  })

上拉加载通过ScrollController的addListener()监听

//判断listview是否滑动到了底部
      if (_scrollController.position.pixels ==
          _scrollController.position.maxScrollExtent)

refresh


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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State createState() {
    return MyAppState();
  }
}

class MyAppState extends State {
  List items = List.generate(10, (i) => i);

  Future handleRefresh() async {
    await Future.delayed(Duration(seconds: 4), () {
      setState(() {
        items.clear();
        items = List.generate(20, (i) => i);
        return null;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('refresh'),
      ),
      body: RefreshIndicator(
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Text('jimmy $index'),
            );
          },
        ),
        onRefresh: handleRefresh,
      ),
    );
  }
}

loadMore


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

void main() {
  runApp(new MaterialApp(home: new MyApp()));
}

class MyApp extends StatefulWidget {
  @override
  State createState() {
    return MyAppState();
  }
}

class MyAppState extends State {
  List items = List.generate(15, (i) => i);

  ScrollController scrollController = ScrollController();

  bool isLoading = false;

  @override
  void initState() {
    super.initState();
    scrollController.addListener(() {
      //判断是否滑动到底部了
      if (scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) {
        getMoreData();
      }
    });
  }

  getMoreData() async {
    if (!isLoading) {
      setState(() {
        isLoading = true;
      });
      List newEntries =
          await dnHttpRequest(items.length, items.length + 10);
      setState(() {
        items.addAll(newEntries);
        isLoading = false;
      });
    }
  }

  Future> dnHttpRequest(int from, int to) async {
    return Future.delayed(Duration(seconds: 2), () {
      return List.generate(to - from, (i) => i + from);
    });
  }

  Widget buildLoadText() {
    return Container(
      child: Padding(
        padding: EdgeInsets.all(12.0),
        child: Center(
          child: Text('正在加载。。。'),
        ),
      ),
    );
  }

  Widget buildProgress(){
    return Padding(
      padding: EdgeInsets.all(12.0),
      child: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('scroll_controller'),
      ),
      body: ListView.builder(
        itemCount: items.length + 1,
        itemBuilder: (BuildContext context, int index) {
          if (index == items.length) {
//            return buildLoadText();
            return buildProgress();
          } else {
            return ListTile(
              title: Text('jimmy $index'),
            );
          }
        },
        controller: scrollController,
      ),
    );
  }

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

你可能感兴趣的:(listview的使用(下拉刷新/上拉加载更多))