Flutter：ListView Builder横向图片列表报错解决及选中样式修改

一、解决RangeError (index)错误 #

这个错误是因为ListView.builder尝试访问超出列表范围的索引，核心原因是数据空安全处理不严谨或异步加载时数据状态不一致，按以下步骤修复：

• 严格处理空安全，避免强制解包
  代码中大量使用!强制解包，一旦docs、brandsIndex对应的文档、items为null或越界，就会触发异常。替换为安全的空判断和边界检查：

  // 先验证数据有效性
  final hasValidData = productController.section.value.docs != null && 
                        brandsIndex != null && 
                        brandsIndex! < productController.section.value.docs!.length &&
                        productController.section.value.docs![brandsIndex!].items != null;
  

  仅当hasValidData为true时才渲染列表，确保后续访问的所有数据都处于有效状态。

• 确保itemCount与实际数据长度一致
  直接使用有效数据的items.length作为itemCount，保证索引范围始终是0到items.length-1，避免出现超出范围的索引访问。

• 添加极端情况防护
  在itemBuilder中额外检查当前索引是否在有效范围内，防止异步数据更新时的临时不匹配：

  itemBuilder: (BuildContext context, int index) {
    final items = productController.section.value.docs![brandsIndex!].items!;
    if (index >= items.length) return const SizedBox.shrink();
    // 原有渲染逻辑
  }
  

二、修改选中索引的边框颜色与宽度 #

需要维护一个选中状态变量，根据状态动态调整边框样式：

1. 定义选中状态变量
   如果是StatefulWidget，在State类中添加：

   int? _selectedIndex;
   

   若使用状态管理Controller，可在Controller中添加对应变量及更新方法。

2. 绑定点击事件更新选中状态
   在GestureDetector的onTap回调中设置当前索引为选中状态：

   onTap: () {
     setState(() {
       _selectedIndex = index;
     });
   },
   

3. 动态设置边框样式
   在Container的decoration中，根据当前索引是否为选中项，切换边框的宽度和颜色：

   border: Border.all(
     width: _selectedIndex == index ? 2 : 1, // 选中时宽度设为2，默认1
     color: _selectedIndex == index 
         ? const Color.fromARGB(255, 255, 66, 66) // 选中时用红色
         : const Color.fromARGB(255, 224, 224, 224), // 默认灰色
   ),
   

完整修复后的代码示例 #

body: Padding(
  padding: const EdgeInsets.symmetric(horizontal: 15),
  child: CustomScrollView(
    slivers: [
      const SliverToBoxAdapter(child: SizedBox(height: 20)),
      Builder(
        builder: (context) {
          final section = productController.section.value;
          final hasValidData = section.docs != null && 
                              brandsIndex != null && 
                              brandsIndex! < section.docs!.length &&
                              section.docs![brandsIndex!].items != null;
          
          if (!hasValidData) return const SliverToBoxAdapter(child: SizedBox());
          
          final items = section.docs![brandsIndex!].items!;
          return SliverToBoxAdapter(
            child: SizedBox(
              height: 60,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: items.length,
                itemBuilder: (BuildContext context, int index) {
                  if (index >= items.length) return const SizedBox.shrink();
                  
                  final isSelected = _selectedIndex == index;
                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        _selectedIndex = index;
                      });
                    },
                    child: Container(
                      width: 50.0,
                      height: 60.0,
                      decoration: BoxDecoration(
                        color: const Color.fromARGB(255, 252, 252, 252),
                        border: Border.all(
                          width: isSelected ? 2 : 1,
                          color: isSelected 
                              ? const Color.fromARGB(255, 255, 66, 66) 
                              : const Color.fromARGB(255, 224, 224, 224),
                        ),
                        image: DecorationImage(
                          image: CachedNetworkImageProvider(
                            items[index].imageUrl.toString()
                          )
                        ),
                        borderRadius: const BorderRadius.all(Radius.circular(15))
                      ),
                    ),
                  );
                },
              ),
            ),
          );
        },
      ),
    ],
  ),
),

内容的提问来源于stack exchange，提问作者Divya