Flutter 有没有办法在单独的小部件中将下载进度侦听器添加到CachedNetworkImage()到dispay CircularProgressIndicator()中?
我想在Flutter 有没有办法在单独的小部件中将下载进度侦听器添加到CachedNetworkImage()到dispay CircularProgressIndicator()中?,flutter,dart,download,listener,loading,Flutter,Dart,Download,Listener,Loading,我想在GridView.builder()内部SliverChildListDelegate()下添加带有加载指示的单独小部件,如CircularProgressIndicator()。因此,当用户向上拖动网格并加载新图像时,可以在底部观察到加载状态指示器。很好的参考是查看Instagram图像网格,基本上它和加载指示器具有相同的行为。在我看来,为了实现该指标,我需要找到将监听器绑定到progressIndicatorBuilder或downloadProgress的CachedNetworkI
GridView.builder()
内部SliverChildListDelegate()
下添加带有加载指示的单独小部件,如CircularProgressIndicator()
。因此,当用户向上拖动网格并加载新图像时,可以在底部观察到加载状态指示器。很好的参考是查看Instagram图像网格,基本上它和加载指示器具有相同的行为。在我看来,为了实现该指标,我需要找到将监听器绑定到progressIndicatorBuilder
或downloadProgress
的CachedNetworkImage()
内部的方法,但我没有找到如何做到这一点
可以在上找到带有代码的项目
在pubspec.yaml
中使用的依赖项:
http:any
缓存的网络图像:^3.0.0
导入'dart:convert';
进口“包装:颤振/基础.dart”;
进口“包装:颤振/材料.省道”;
将“package:http/http.dart”导入为http;
导入“package:cached_network_image/cached_network_image.dart”;
void main(){
runApp(MyApp());
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建(构建上下文){
返回材料PP(
debugShowCheckedModeBanner:false,
标题:“颤振演示”,
主题:主题数据(
主样本:颜色。蓝色,
),
主页:MyHomePage(标题:“颤振演示主页”),
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage({Key,this.title}):超级(Key:Key);
最后的字符串标题;
@凌驾
_MyHomePageState createState()=>\u MyHomePageState();
}
类_MyHomePageState扩展状态{
列表=[];
var isLoading=false;
列表图像=[];
int计数器=0;
int totalNumberImages=0;
final _scrollController=新scrollController();
final _scrollController2=新的ScrollController();
字符串customText='';
双文本高度=0;
_fetchData()异步{
设置状态(){
isLoading=true;
});
最终响应=等待http
.get(Uri.parse(“https://dog.ceo/api/breed/hound/images/random/100"));
如果(response.statusCode==200){
list=(json.decode(response.body)['message']);
totalNumberImages=list.length;
设置状态(){
isLoading=false;
fetchTen();
});
}否则{
抛出异常(“加载照片失败”);
}
}
fetch()异步{
设置状态(){
添加(列表[计数器]);
计数器++;
});
}
fetchTen(){
if(计数器<总数字图像){
对于(int i=0;i<10;i++){
fetch();
}
}否则{
设置状态(){
customText=“故事结束:(”;
textHeight=1.0;
打印(“故事结束:(”);
});
}
}
@凌驾
void initState(){
super.initState();
打印(“初始状态”);
WidgetsBinding.instance.addPostFrameCallback((){
_fetchData();
});
_scrollController2.addListener((){
如果(_scrollController2.position.pixels==
_scrollController2.position.maxScrollExtent){
fetchTen();
}
});
}
@凌驾
无效处置(){
_scrollController2.dispose();
super.dispose();
}
@凌驾
小部件构建(构建上下文){
返回脚手架(
主体:卸载
?中心(
子对象:CircularProgressIndicator(),
)
:手势检测器(
onVerticalDragStart:(详细信息){
fetchTen();
},
子:自定义滚动视图(
控制器:_scrollController2,
条子:[
银表(
委托:SliverChildListDelegate(
[
GridView.builder(
收缩膜:对,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
主轴间距:3.0,
交叉轴间距:3.0,
交叉轴计数:3),
控制器:\ u滚动控制器,
itemCount:images.length,
itemBuilder:(构建上下文,int索引){
返回容器(
限制条件:
BoxConstraints.tightFor(高度:150.0),
子:CachedNetworkImage(
imageUrl:images[索引],
progressIndicatorBuilder:
(上下文、url、下载进度)=>Center(
子:容器(
颜色:颜色。灰色[400],
),
),
errorWidget:(上下文、url、错误)=>
文本(“错误”),
适合:BoxFit.cover,
),
);
},
),
填充物(
填充:常数边集全部(8.0),
儿童:中心(
子:文本(
“$customText”,
风格:
TextStyle(高度:textHeight,字体大小:25),
),
),
)
],
),
),
],
),
),
);
}
}
收到通过CachedNetworkImageProvider或ImageProvider绑定侦听器的提示。ImageProvider
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, url, error) =>
Text('Error'),
fit: BoxFit.cover,
),
);
},
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Text(
"$customText",
style:
TextStyle(height: textHeight, fontSize: 25),
),
),
)
],
),
),
],
),
),
);
}
}