Flutter GridView Item点击单独变色与选中角标实现问题

• 你当前定义了全局单一的_ContainerColor状态变量，所有绑定这个变量的Container都会在setState触发时同步更新颜色，自然会出现点击后多个项同时变色的问题
• 其余4个Item的背景色直接硬编码为Colors.white，完全没有绑定选中状态，无法响应点击交互
• 自定义的Item类内部写了列表初始化逻辑，存在语法错误无法正常运行，也没有给每个项配置对应的图标、内边距等差异化参数
• 重复手写6个结构几乎一致的Item组件，代码冗余度高，后续维护修改成本大

1. 修正数据模型定义 #

把Item类从State类中独立出来，给每个项补充图标、内边距等必要参数，列表初始化放在State类中完成：

// 独立定义数据模型
class FocusItem {
  final String title;
  final IconData icon;
  final double padding;
  bool isSelected;

  FocusItem({
    required this.title,
    required this.icon,
    required this.padding,
    this.isSelected = false,
  });
}

2. 替换全局颜色变量为列表状态 #

删除原有全局_ContainerColor变量，在State中初始化所有选项的列表数据，每个项的选中状态独立存在自己的模型属性里：

class _SelectionPageState extends State<SelectionPage> {
  // 初始化所有6个选项，配置各自的标题、图标、内边距
  final List<FocusItem> _itemList = [
    FocusItem(
      title: "Maintaining healthy relationships",
      icon: MyFlutterApp.relationships,
      padding: 8,
    ),
    FocusItem(
      title: "Being happier and more content in life",
      icon: MyFlutterApp.happy,
      padding: 13.5,
    ),
    FocusItem(
      title: "Maintaining a better work-life balance",
      icon: MyFlutterApp.balance,
      padding: 8,
    ),
    FocusItem(
      title: "Personal growth and development",
      icon: MyFlutterApp2.personal_growth,
      padding: 10,
    ),
    FocusItem(
      title: "Stress and anxiety management",
      icon: MyFlutterApp2.meditate,
      padding: 8,
    ),
    FocusItem(
      title: "Mental and emotional well-being",
      icon: MyFlutterApp3.well_rounded,
      padding: 11,
    ),
  ];

  // 原有页面其余逻辑保留

3. 抽离可复用Item组件，实现独立选中逻辑 #

不要重复手写6个Item，通过遍历_itemList生成子组件，点击时只修改当前点击项的isSelected属性，同时在右上角加上选中时显示的勾选标记：

// GridView部分修改为如下写法
GridView.count(
  primary: true,
  shrinkWrap: true,
  padding: const EdgeInsets.all(10),
  childAspectRatio: 1.15,
  crossAxisCount: 2,
  crossAxisSpacing: 25,
  mainAxisSpacing: 25,
  // 遍历列表生成所有Item
  children: _itemList.map((item) {
    return GestureDetector(
      onTap: () {
        setState(() {
          // 只修改当前点击项的选中状态
          item.isSelected = !item.isSelected;
        });
      },
      child: Stack( // 用Stack放置右上角的勾选标记
        children: [
          Container(
            padding: EdgeInsets.all(item.padding),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              border: Border.all(
                color: const Color.fromARGB(255, 20, 83, 106),
                width: 2.5,
              ),
              // 用当前项自己的isSelected属性控制背景色
              color: item.isSelected ? const Color(0xffa1d0e6) : Colors.white,
            ),
            child: Column(
              children: [
                Align(
                  alignment: Alignment.topCenter,
                  child: Icon(
                    item.icon,
                    color: const Color(0xff31708c),
                    size: item.icon == MyFlutterApp.happy ? 30 
                      : item.icon == MyFlutterApp2.personal_growth ? 35
                      : item.icon == MyFlutterApp3.well_rounded ? 37
                      : item.icon == MyFlutterApp.balance ? 40
                      : 45,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  item.title,
                  style: GoogleFonts.montserrat(
                    fontSize: 14,
                    fontWeight: FontWeight.w500,
                    color: const Color(0xff31708c),
                  ),
                  textAlign: TextAlign.center,
                )
              ],
            ),
          ),
          // 选中时才显示右上角勾选标记
          if (item.isSelected)
            const Positioned(
              top: 8,
              right: 8,
              child: Icon(
                Icons.check_circle,
                color: Color(0xff31708c),
                size: 20,
              ),
            )
        ],
      ),
    );
  }).toList(),
)

• 多Item列表的选中状态不要用全局单一变量控制，必须给每个Item绑定独立的状态属性，才能实现单Item独立刷新
• 重复结构的组件尽量抽离复用或者通过数据遍历生成，减少冗余代码的同时也能避免漏改、错改的问题
• 角落的浮动标记用Stack + Positioned实现即可，不需要额外复杂布局

内容的提问来源于stack exchange，提问作者Ta-Ty