Flutter中如何让GridView的边框可点击并实现点击变色？

你可以通过维护状态记录每个单元格的边框颜色，结合setState来实现点击变色效果，具体修改如下：

1. 添加状态变量
   在你的State类中定义一个列表，用来存储每个单元格的边框颜色，初始值设为灰色：

List<Color> _borderColors = List.generate(9, (_) => Colors.grey);

2. 修改点击事件逻辑
   更新_tapped方法，点击时切换对应索引单元格的边框颜色：

void _tapped(int index) {
  setState(() {
    // 点击切换红/灰，也可以直接固定设为红色（根据需求调整）
    _borderColors[index] = _borderColors[index] == Colors.grey ? Colors.red : Colors.grey;
  });
}

3. 更新Container的边框颜色
   在BoxDecoration中使用状态变量里的颜色：

child: Container(
  decoration: BoxDecoration(
    border: Border.all(color: _borderColors[index], width: 5),
  ),
),

优化点（可选） #

默认的Border.all会给四个边都加边框，相邻单元格的边框会重叠（看起来是10px宽度），如果想要更自然的网格效果，可以给每个单元格设置单边边框，比如：

// 根据单元格位置设置边框：第一行不加上边，第一列不加左边，以此类推
Border _getBorder(int index) {
  int row = index ~/ 3;
  int col = index % 3;
  return Border(
    top: row == 0 ? BorderSide.none : BorderSide(color: _borderColors[index], width: 5),
    left: col == 0 ? BorderSide.none : BorderSide(color: _borderColors[index], width: 5),
    right: BorderSide(color: _borderColors[index], width: 5),
    bottom: BorderSide(color: _borderColors[index], width: 5),
  );
}

然后把border: Border.all(...)换成border: _getBorder(index)，这样网格边框不会重叠，点击单个单元格时边框也能正常变色。

完整修改后的build方法示例：

@override
Widget build(BuildContext context) {
  return Expanded(
    flex: 3,
    child: GridView.builder(
      itemCount: 9,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      itemBuilder: (BuildContext context, int index) {
        return GestureDetector(
          onTap: () {
            _tapped(index);
          },
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(color: _borderColors[index], width: 5),
              // 或者用上面的_getBorder方法：border: _getBorder(index),
            ),
          ),
        );
      },
    ),
  );
}

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