ListView的监听

Posted 2021-11-30 braveheart007

ListView可以配合ScrollController使用：
创建ScrollController _ScrollController=ScrollController();
在initState中监听如下：

void initState() {
  _scrollController.addListener((){
    if(_scrollController.position.pixels==_scrollController.position.maxScrollExtent){
      setState(() {
        if(_itemcount<18){_itemcount++;}
      });
    }
  });
  super.initState();
}
监听过程中注意：

_scrollController.position.pixels==_scrollController.position.maxScrollExtent  这个是固定写法，请勿更改！意思是监控底部的上拉动作；

setState()操作必不可少，可以及时刷新画面；

销毁：
@override
void dispose() {
  // TODO: implement dispose
  _scrollController.dispose();
  super.dispose();
}

示例：
import ‘package:flutter/material.dart‘;
import ‘dart:ui‘;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

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

class _HomePageState extends State<HomePage> {
  ScrollController _scrollController=ScrollController();
  int _itemcount=3;
  @override
  void initState() {
    // TODO: implement initState
    _scrollController.addListener((){
      if(_scrollController.position.pixels==_scrollController.position.maxScrollExtent){
        Future.delayed(Duration(seconds: 1));
        setState(() {
          if(_itemcount<18){_itemcount++;}
        });
      }
    });
    super.initState();
  }
  @override
  void dispose() {
    // TODO: implement dispose
    _scrollController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(‘RefreshIndicator‘),),
      body: RefreshIndicator(
        onRefresh: ()async{
          await Future.delayed(Duration(seconds: 1));
          setState(() {
            if(_itemcount>=4){_itemcount--;}
          });
        },
        child: ListView.builder(
          controller: _scrollController,
          itemCount: _itemcount,
          itemBuilder: (context,index){
            return Container(
              width: window.physicalSize.width,
              height: 200,
              child: Image.network(‘http://www.ecobentech.com/images/$index.jpg‘,fit: BoxFit.fitWidth,),
            );
          },
        )
      ),
    );
  }
}