[英]How to Implement Progress Indicator in Flutter
I am trying to implement a Progress Indicator
in Flutter but I am not sure whether I need to put in the if condition to show Progress Indicator
while the item is still Loading.我正在尝试在 Flutter 中实现
Progress Indicator
,但我不确定是否需要在项目仍在加载时放入 if 条件以显示Progress Indicator
。
class HomePageNewArrival extends StatefulWidget {
final List<Product> productList;
HomePageNewArrival({this.productList});
@override
_HomePageNewArrivalState createState() => _HomePageNewArrivalState();
}
class _HomePageNewArrivalState extends State<HomePageNewArrival> {
@override
Widget build(BuildContext context) {
return Container(
height: 550,
child: GridView.builder(
physics: NeverScrollableScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: 2 / 3.2,
crossAxisSpacing: 1,
mainAxisSpacing: 1,
),
itemCount: this.widget.productList.length,
itemBuilder: (context, index) {
if (index.) {
return HomenewArrivalProducts(this.widget.productList[index]);
} else {
return new CircularProgressIndicator();
}
}),
);
}
}
Building widgets in flutter is instant i think what you wanna do is to show a circular spinner while images are loading in HomenewArrivalProducts()
Widget if you have a Image.network()
try this:在 flutter 中构建小部件是即时的我认为你想要做的是在加载图像时显示一个圆形微调器
HomenewArrivalProducts()
如果你有一个Image.network()
) 小部件试试这个:
child: Image.network(
'https://example.com/image.jpg',
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
if (loadingProgress == null)
return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
: null,
),
);
},
),
and if you wanna just to make an illusion of something is loading you can use FutureBuilder()
如果你只想制造某种正在加载的错觉,你可以使用
FutureBuilder()
FutureBuilder(
future: Future.delayed(Duration(milliseconds: 500)),
builder: (ctx, snapshot) =>
snapshot.connectionState == ConnectionState.waiting
? CircularProgressIndicator()
: GridView.builder(...),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.