Flutter 项目实战 实现分页加载图片的列表 十
import 'package:flutter/material.dart';
import 'package:flutter_gallery_ultimate/utils/Data.dart';
import 'package:flutter_gallery_ultimate/utils/Utils.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int currentPage = 0;
List<String> images = Data.imageList;
void _loadMore() {
setState(() {
currentPage++;
images.addAll(Data.imageList);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: ListView.builder(
itemCount: images.length,
itemBuilder: (context, index) {
return Utils.imageItem(images[index], context);
},
),
floatingActionButton: FloatingActionButton(
onPressed: _loadMore,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
在这个代码实例中,我们创建了一个名为MyHomePage
的StatefulWidget,它维护了当前页面的状态。在_MyHomePageState
状态类中,我们定义了一个_loadMore
函数来加载更多图片,并通过ListView.builder
构建了一个可以无限滚动的图片列表。每次用户点击浮动动作按钮时,就会调用_loadMore
函数,从而加载更多的图片。这个例子展示了如何在Flutter中实现图片列表的分页加载。
评论已关闭