时间戳

首页 > 解决方案 > RangeError（索引）：无效值：有效值范围为空：0 在获取数据之前？

flutter - RangeError（索引）：无效值：有效值范围为空：0 在获取数据之前？

问题描述

我尝试在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

之后它显示正常。有人可以帮忙吗？

标签： flutter

解决方案

使用FutureBuilder. 加载数据时显示 a 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,
        ),
      ),
    );
        }
      },
    )

推荐阅读