選擇Flutter中的項目后如何更改卡片顏色？

Question

我在從 model 獲取的 gridView 中列出了多張卡。 我想在選擇卡片時更改特定卡片的背景顏色。 也就是說，當我觸摸卡片時，我想讓那張卡片的顏色改變，如果我 select 另一張卡片，我想讓第一張卡片的顏色 go 恢復到原來的顏色，並希望第二張卡片的顏色改變。 我嘗試了各種方法，但無法做到。

網格視圖：

Widget build(BuildContext context) {
    final petTypes = widget.pet.types();
    var petKeys = petTypes.keys.toList();

    return Scaffold(
        appBar: AppBar(
          title: Text('Add pets - Type'),
          backgroundColor: Color.fromRGBO(101, 69, 112, 1.0),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  scrollDirection: Axis.vertical,
                  primary: false,
                  children: List.generate(petTypes.length, (index) {
                     return GestureDetector(
                       child: Card(
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              petTypes[petKeys[index]],
                              Text(petKeys[index]),
                            ],
                          ),
                          // onPressed: () async {
                          //   widget.pet.type = petKeys[index];
                          // },
                        ),
                         onTap: (){
                         setState(() {
                           widget.pet.type = petKeys[index];
                         });
                         }
                     );
                  }),
                ),
              ),

model：

Map<String, Image> types() => {
        "Dog":
            Image(image: AssetImage('Assets/images/dog-type.png'), width: 70),
        "Cat":
            Image(image:AssetImage('Assets/images/cat-type.png'), width: 70),
        "Bird":
            Image(image:AssetImage('Assets/images/bird-type.png'), width: 70),
        "Rabbit":
            Image(image:AssetImage('Assets/images/rabbit-type.png'), width: 70),
        "Hamster":
            Image(image:AssetImage('Assets/images/hamster-type.png'), width: 70),
        "Fish":
            Image(image:AssetImage('Assets/images/fish-tank.png'), width: 70),

...

  };

Answer 1

在 state class 上創建一個可為空的 int 並基於它傳遞顏色，並在onTap: like

 int? selectedIndex;
  @override
  Widget build(BuildContext context) {
   //...  
   GestureDetector(
      child: Card(
        color: selectedIndex != null ? Colors.green : null,
      ),
      onTap: () {
        setState(() {
          selectedIndex = index;
        });
      },
    );