ListView通过flutter实现
下面代码中都有详细的注释,我这里就不多写了
import 'package:flutter/material.dart';
void main()=>runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "listview",
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget{
@override
_MyHomePageState createState() {
// TODO: implement createState
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage>{
//使用list.generate()构造出了一个List列表
List<int> items = List.generate(10, (i)=>i);
ScrollController _scrollController = new ScrollController();
bool isPerformingRequest = false; //是否有请求在进行
/**
* 当用户滚到最底部的时候我们调用这个方法
*/
Future<List<int>> fakeRequest(int from, int to) async{
return Future.delayed(Duration(seconds: 2),(){
return List.generate(to-from,(i)=>i+from);
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(
title: Text("listView"),
),
body: ListView.builder(
controller: _scrollController,
itemCount: items.length,
itemBuilder: (context, it){
print("$it----${items.length}");
if(it == items.length-1){
print("helloo....");
return _buildProgressIndicator();
}else{
return ListTile(
//主标题
title: new Text("number$it"),
//最右边的图标
trailing: Icon(Icons.forward),
//做左边的图标
leading: Icon(Icons.arrow_left),
//副标题
subtitle: Text("副标题"),
onLongPress: (){
print("click.....$it") ;
},
);
}
},
),
);
}
_getMoreData() async{
if(!isPerformingRequest){//这里判断是否有请求
//调用 setState()会马上调用build这个函数,重新绘制界面
setState(() {
isPerformingRequest = true;
});
List<int> newExtries = await fakeRequest(items.length,items.length+10);
//访问网络处理数据的时候我们可能碰到空的数据
if(newExtries.isEmpty){
double edge = 50.0;
double offsetFromBottom = _scrollController.position.maxScrollExtent - _scrollController.position.pixels;
if(offsetFromBottom<edge){
print("${_scrollController.offset}---%edge---$offsetFromBottom");
_scrollController.animateTo(
_scrollController.offset-(edge-offsetFromBottom),
duration: new Duration(milliseconds: 500),
curve: Curves.easeOut,
);
}
}
setState(() {
items.addAll(newExtries);
isPerformingRequest = false;
});
}
}
//初始化的方法,相当于Android中的onCreate
@override
void initState() {
// TODO: implement initState
super.initState();
_scrollController.addListener((){
if(_scrollController.position.pixels ==_scrollController.position.maxScrollExtent){
_getMoreData();
}
});
}
//生命周期中的方法 相当于onDestory()方法
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_scrollController.dispose();
}
Widget _buildProgressIndicator(){
return new Padding(
padding: const EdgeInsets.all(8.0),
child: new Center(
child: new Opacity(
opacity: isPerformingRequest?1.0:0.0,
child: new CircularProgressIndicator(),
),
),
);
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)