问题描述
我想在 CircularProgressIndicator()
内的 GridView.builder()
下添加带有加载指示的单独小部件,例如 SliverChildListDelegate()
。因此,当用户向上拖动网格并加载新图像时,可以在底部观察加载状态指示器。很好的参考是查看 Instagram 图片网格,基本上它与加载指示器具有相同的行为。在我看来,为了实现该指标,我需要找到将侦听器绑定到 progressIndicatorBuilder
内的 downloadProgress
或 CachednetworkImage()
的方法,但我没有找到如何做到这一点。
可以在 GitHub
上找到带有代码的项目pubspec.yaml
中使用的依赖项:
http: any
cached_network_image: ^3.0.0
代码:
import 'dart:convert';
import 'package:Flutter/foundation.dart';
import 'package:Flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:cached_network_image/cached_network_image.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,title: 'Flutter Demo',theme: ThemeData(
primarySwatch: Colors.blue,),home: MyHomePage(title: 'Flutter Demo Home Page'),);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List list = [];
var isLoading = false;
List<String> images = [];
int counter = 0;
int totalNumberImages = 0;
final _scrollController = new ScrollController();
final _scrollController2 = new ScrollController();
String customText = '';
double textHeight = 0;
_fetchData() async {
setState(() {
isLoading = true;
});
final response = await http
.get(Uri.parse("https://dog.ceo/api/breed/hound/images/random/100"));
if (response.statusCode == 200) {
list = (json.decode(response.body)['message']);
totalNumberImages = list.length;
setState(() {
isLoading = false;
fetchTen();
});
} else {
throw Exception('Failed to load photos');
}
}
fetch() async {
setState(() {
images.add(list[counter]);
counter++;
});
}
fetchTen() {
if (counter < totalNumberImages) {
for (int i = 0; i < 10; i++) {
fetch();
}
} else {
setState(() {
customText = "end of story :(";
textHeight = 1.0;
print("end of story :(");
});
}
}
@override
void initState() {
super.initState();
print("initState");
WidgetsBinding.instance.addPostFrameCallback((_) {
_fetchData();
});
_scrollController2.addListener(() {
if (_scrollController2.position.pixels ==
_scrollController2.position.maxScrollExtent) {
fetchTen();
}
});
}
@override
void dispose() {
_scrollController2.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: isLoading
? Center(
child: CircularProgressIndicator(),)
: GestureDetector(
onVerticalDragStart: (details) {
fetchTen();
},child: CustomScrollView(
controller: _scrollController2,slivers: [
SliverList(
delegate: SliverChildListDelegate(
[
GridView.builder(
shrinkWrap: true,gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
mainAxisspacing: 3.0,crossAxisspacing: 3.0,crossAxisCount: 3),controller: _scrollController,itemCount: images.length,itemBuilder: (BuildContext context,int index) {
return Container(
constraints:
BoxConstraints.tightFor(height: 150.0),child: CachednetworkImage(
imageUrl: images[index],progressIndicatorBuilder:
(context,url,downloadProgress) => Center(
child: Container(
color: Colors.grey[400],errorWidget: (context,error) =>
Text('Error'),fit: BoxFit.cover,);
},Padding(
padding: const EdgeInsets.all(8.0),child: Center(
child: Text(
"$customText",style:
TextStyle(height: textHeight,fontSize: 25),)
],],);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)