Flutter动态列表中如何定位点击项并单独设置容器背景？

你当前的问题根源在于用全局的_bgColor和_textColor变量控制所有列表项的样式，点击任何一项都会触发所有项同步变色。正确的做法是记录选中的索引，根据索引单独判断每个项的样式，无需提取单独Widget。

修改步骤及代码： #

1. 替换原有全局颜色变量为选中索引变量：

int? _selectedIndex; // 记录选中的项索引

@override
void initState() {
  super.initState();
  _selectedIndex = 0; // 默认选中第一个项，可根据需求调整
}

2. 修改ListView.builder的逻辑，根据当前索引判断样式：

ListView.builder(
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemCount: HomeStore.storage.length,
  itemBuilder: (BuildContext ctx, index) {
    // 判断当前项是否被选中
    bool isSelected = _selectedIndex == index;
    // 根据选中状态分配对应颜色
    Color bgColor = isSelected ? configColors.orange : Colors.white;
    Color textColor = isSelected ? Colors.white : configColors.textStorage;

    return Row(
      children: <Widget>[
        InkWell(
          onTap: () {
            setState(() {
              _selectedIndex = index; // 点击时更新选中索引
            });
          },
          child: Container(
            width: 71.4,
            height: 30.3,
            decoration: BoxDecoration(
              color: bgColor,
              borderRadius: BorderRadius.circular(10)
            ),
            child: Align(
              alignment: Alignment.center,
              child: Text(
                HomeStore.storage[index],
                style: TextStyle(color: textColor),
              ),
            ),
          ),
        ),
        SizedBox(width: 18),
      ],
    );
  },
)

说明： #

每个列表项通过自身索引与_selectedIndex对比，决定是否应用选中样式。点击时仅更新选中索引，只有对应的项会切换颜色，其他项保持原有状态，完全适配你当前的列表结构。

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