RangeError(索引):无效值:有效值范围为空:0获取数据之前

Question

am尝试在CarouselSlider.builder中显示图像。这是代码

return Container(
color: Constants.secondaryColor,
child: CarouselSlider.builder(
itemCount: items.length,
itemBuilder: _listViewItemBuilder,
options: CarouselOptions(
height: MediaQuery.of(context).size.height / 4,
aspectRatio: 16 / 9,
viewportFraction: 1.0,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: false,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
),
),
);

Widget _listViewItemBuilder(
BuildContext context, int index, int pageViewIndex) {
var bannerImgs = items[index];
return Container(
child: _itemImg(bannerImgs),
); 
}
Widget _itemImg(Album img) {
return Center(
child: FadeInImage.assetNetwork(
placeholder: 'images/loader.gif', image: img.image!),
);
}

在加载第一张图像之前，它显示错误：

RangeError (index): Invalid value: Valid value range is empty: 0

在那之后，它表现得很好。有人能帮上忙吗？

Answer 1

使用FutureBuilder。加载数据时显示CircularProgressIndicator，加载数据时则显示您的CarouselSlider.builder。

示例代码：

FutureBuilder<List<Album>>(
future: fetchApi, // async work
builder: (BuildContext context, AsyncSnapshot<List<Album>> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting: return CircularProgressIndicator();
default:
if (snapshot.hasError)
return Text('Error: ${snapshot.error}');
else
return Container(
color: Constants.secondaryColor,
child: CarouselSlider.builder(
itemCount: items.length,
itemBuilder: _listViewItemBuilder,
options: CarouselOptions(
height: MediaQuery.of(context).size.height / 4,
aspectRatio: 16 / 9,
viewportFraction: 1.0,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: false,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
),
),
);
}
},
)

Answer 2

return items.length > 0?  Container(
color: Constants.secondaryColor,
child: CarouselSlider.builder(
itemCount: items.length,
itemBuilder: _listViewItemBuilder,
options: CarouselOptions(
height: MediaQuery.of(context).size.height / 4,
aspectRatio: 16 / 9,
viewportFraction: 1.0,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: false,
autoPlayInterval: Duration(seconds: 4),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
),
),
) : CircularProgressIndicator()

---

在中

initState(){
Future.delayed(const Duration(milliseconds: 1500), () {
setState(() {

});
});
}