Flutter中ListView.builder单选Tile点击高亮切换问题

我用ListView.builder做了个水平Tile列表，想要实现单选功能——点击某个Tile时，之前选中的自动取消高亮。现在有一段包含selectedIndex = -1;的代码能运行，但多次点击后得双击才能高亮，而且我搞不懂这段代码的原理。

原代码的问题分析 #

原代码的核心问题是同时维护了三套选中状态：Variation类里的selected字段、State里的selectedIndex，以及food.selectedVar，多状态互相干扰导致逻辑混乱：

• 点击时先翻转当前Tile的selected，再根据这个值去设置selectedIndex和selectedVar，状态更新顺序完全混乱
• 高亮判断需要同时满足variations[index].selected和index == selectedIndex，一旦状态不同步，就会出现点击无反应、需要双击的情况
• selectedIndex = -1;原本是用来取消选中，但因为和variations[index].selected的翻转逻辑绑定，导致点击已选中的Tile时：第一次点击会取消selectedIndex但把selected设为false，第二次点击才会重新把selected设为true并设置selectedIndex，所以必须双击才能高亮

修复后的实现方案 #

我们只需要用selectedIndex这一个状态来管理选中逻辑，去掉冗余的Variation.selected和多余的状态判断，逻辑会清晰很多：

1. 简化数据类（移除冗余字段） #

class Variation {
  String title;
  String imgURL;
  // 移除多余的selected字段，统一由State管理选中状态
  Variation(this.imgURL, this.title);
}

2. 修改State类的单选逻辑 #

class FoodDetail extends StatefulWidget {
  final Food food;

  FoodDetail(this.food, {super.key});

  @override
  State<FoodDetail> createState() => _FoodDetailState();
}

class _FoodDetailState extends State<FoodDetail> {
  // 只维护一个选中索引：-1表示未选中任何项
  int selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(25),
      color: kBackground,
      child: Column(
        children: [
          Text(
            widget.food.name,
            style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
          ),
          const SizedBox(height: 15),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildIconText(
                Icons.access_time_outlined,
                Colors.blue,
                widget.food.waitTime,
              ),
              _buildIconText(
                Icons.star_outlined,
                Colors.amber,
                widget.food.score.toString(),
              ),
            ],
          ),
          const SizedBox(height: 30),
          const Row(
            children: [
              Text(
                'Variations',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
            ],
          ),
          const SizedBox(height: 10),
          SizedBox(
            height: 100,
            child: ListView.builder(
              itemCount: widget.food.variations.length,
              scrollDirection: Axis.horizontal,
              itemBuilder: (context, index) => GestureDetector(
                onTap: () {
                  setState(() {
                    // 单选逻辑：如果点击已选中项则取消，否则选中当前项
                    if (selectedIndex == index) {
                      selectedIndex = -1;
                      widget.food.selectedVar = null;
                    } else {
                      selectedIndex = index;
                      widget.food.selectedVar = widget.food.variations[index];
                    }
                  });
                },
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Container(
                    padding: const EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      // 直接通过selectedIndex判断高亮，逻辑简单直接
                      color: selectedIndex == index ? kPrimaryColor : Colors.white,
                      borderRadius: BorderRadius.circular(40),
                    ),
                    child: Column(
                      children: [
                        Image.asset(
                          widget.food.variations[index].imgURL,
                          width: 52,
                        ),
                        Text(
                          widget.food.variations[index].title,
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 30),
          const Row(
            children: [
              Text(
                'About',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              )
            ],
          ),
          const SizedBox(height: 10),
          Text(
            widget.food.about,
            style: const TextStyle(
              wordSpacing: 1.2,
              height: 1.5,
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildIconText(IconData icon, Color color, String text) {
    return Row(
      children: [
        Icon(
          icon,
          color: color,
          size: 20,
        ),
        Text(
          text,
          style: TextStyle(fontSize: 16),
        ),
      ],
    );
  }
}

逻辑原理说明 #

• 单选的核心是单一状态源：只用selectedIndex记录当前选中的项索引，-1表示无选中项。所有选中判断、高亮显示都只依赖这一个状态，彻底避免状态冲突。
• 原代码里的selectedIndex = -1;是取消选中的逻辑，但之前和Variation.selected的翻转绑定导致状态不同步。现在我们直接判断：点击已选中项就设为-1（取消），否则设为当前索引（选中），逻辑清晰直接。
• 高亮判断只用selectedIndex == index，没有额外条件，彻底解决了双击才能高亮的问题。

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