Flutter：如何在GestureDetector onTap时自动更新GridView背景色

问题核心原因 #

1. 子组件MyPage1Widget的颜色变量仅在初始化时赋值，未监听父组件传入的颜色参数变化，导致已选中卡片无法自动更新背景色
2. 父组件ListView.builder中在itemBuilder内修改selectedIndex的逻辑不合理，会引发多次不必要的状态赋值

1. 优化子组件MyPage1Widget的颜色响应逻辑 #

移除冗余的newBgColor变量，直接使用父组件传入的widget.selectedColor，让UI自动跟随参数变化刷新：

class _MyPage1WidgetState extends State<MyPage1Widget> {
  int selectedCard = 0;

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      shrinkWrap: true,
      itemCount: categoryList.length,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 10,
        mainAxisSpacing: 30,
      ),
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () {
            setState(() {
              selectedCard = index;
            });
          },
          child: Container(
            height: 120,
            width: 120,
            decoration: BoxDecoration(
              // 直接使用父组件传入的最新颜色值
              color: selectedCard == index ? Color(widget.selectedColor) : Colors.white,
              shape: BoxShape.circle,
            ),
            child: Image.asset(categoryList[index]),
          ),
        );
      },
    );
  }
}

2. 修正父组件selectedIndex的初始化逻辑 #

将selectedIndex的初始化移至父组件的initState中，避免在itemBuilder内重复执行赋值操作：

// 父组件的initState示例
@override
void initState() {
  super.initState();
  // 初始化选中索引为当前bgColor对应的位置
  selectedIndex = colors.indexOf(bgColor);
}

修改后的ListView.builder代码：

ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: colors.length,
  itemBuilder: (BuildContext context, int index) {
    return GestureDetector(
      onTap: () {
        setState(() {
          bgColor = colors[index];
          selectedIndex = index;
          colorSelected = bgColor;
          print('bgColor: $bgColor');
        });
      },
      child: Padding(
        padding: const EdgeInsets.all(5),
        child: Container(
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Color(colors[index]),
          ),
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: selectedIndex == index
                ? SvgPicture.asset(
                    'assets/svg/categoryTick.svg',
                    color: Colors.black,
                  )
                : null,
          ),
          width: 35.0,
        ),
      ),
    );
  })

3. 验证效果 #

当点击颜色选项时，父组件调用setState更新bgColor，MyPage1Widget会自动接收最新的selectedColor参数，GridView中已选中的卡片会直接使用新颜色刷新UI，无需额外操作。

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