Flutter水平滚动ListView按钮：点击两次才显示勾选覆盖层问题

问题根源分析 #

你当前的代码有两个核心问题导致了点击两次才生效：

1. 状态变量设计冗余且逻辑冲突：用_pressed（全局布尔值）和_btnIndex（索引）两个变量控制选中状态，点击时切换_pressed的逻辑会导致第一次点击后状态判断出现矛盾（比如初始_pressed=false，第一次点击后变为true，但部分UI判断是!_pressed && _btnIndex == 1，反而不满足红色背景的条件）。
2. 条件判断逻辑颠倒：部分UI状态的判断条件和点击后的状态更新不匹配，导致第一次点击后UI没有按预期更新。

修复方案 #

我们可以简化状态管理，用单个变量存储当前选中的按钮索引，同时调整UI判断逻辑，让点击行为和UI状态一一对应。

步骤1：重构状态变量

把原来的：

bool _pressed = false;
int _btnIndex = 0;

替换为：

// 存储当前选中的按钮索引，null表示未选中任何按钮
int? _selectedIndex;

步骤2：修改按钮点击逻辑

根据需求选择以下两种逻辑之一：

• 单选（点击选中，再次点击取消）：

onTap: () {
  setState(() {
    // 如果当前按钮已选中就取消，否则选中它
    _selectedIndex = _selectedIndex == 1 ? null : 1;
  });
  print('I tapped no 1');
}

• 强制单选（点击即选中，仅保留一个选中状态）：

onTap: () {
  setState(() {
    _selectedIndex = 1;
  });
  print('I tapped no 1');
}

步骤3：调整UI条件判断

把按钮相关的UI判断全部改为基于_selectedIndex：

• 容器颜色：

color: _selectedIndex == 1 ? Colors.red : Colors.white54,

• 图片颜色滤镜：

colorFilter: _selectedIndex == 1 
    ? ColorFilter.mode(Colors.black87, BlendMode.darken) 
    : null,

• 勾选图标：

child: _selectedIndex == 1 
    ? Icon(Icons.check, color: Colors.white) 
    : null,

步骤4：优化代码（避免重复）

因为你有14个结构完全相同的按钮，建议用List.generate循环生成，减少冗余代码：

ListView(
  padding: EdgeInsets.all(6),
  scrollDirection: Axis.horizontal,
  children: List.generate(14, (index) {
    final buttonNumber = index + 1;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          child: Padding(
            padding: const EdgeInsets.all(6.0),
            child: Material(
              elevation: 4.0,
              shape: CircleBorder(),
              clipBehavior: Clip.hardEdge,
              color: _selectedIndex == buttonNumber ? Colors.red : Colors.white54,
              child: Ink.image(
                image: AssetImage('assets/images/colosseum.jpg'),
                fit: BoxFit.cover,
                colorFilter: _selectedIndex == buttonNumber
                    ? ColorFilter.mode(Colors.black87, BlendMode.darken)
                    : null,
                width: 60.0,
                height: 60.0,
                child: InkWell(
                  focusColor: Colors.red,
                  highlightColor: Colors.white60,
                  child: _selectedIndex == buttonNumber
                      ? Icon(Icons.check, color: Colors.white)
                      : null,
                  onTap: () {
                    setState(() {
                      _selectedIndex = _selectedIndex == buttonNumber ? null : buttonNumber;
                    });
                    print('I tapped no $buttonNumber');
                  },
                ),
              ),
            ),
          ),
        ),
        Container(
          alignment: Alignment.center,
          child: Text('${buttonNumber * 10}'), // 根据需求调整数字显示
        ),
      ],
    );
  }),
)

现成组件推荐 #

如果不想自定义按钮，Flutter提供了几个现成组件可以实现类似功能：

• ToggleButtons：适合一组可切换的按钮，支持单选/多选，自带选中状态样式。
• Chip：可以设置selected属性控制选中状态，自带圆角和选中样式，适合这种小型按钮场景。

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