如何在 Flutter 中选择项目时更改卡片颜色?

Posted

技术标签:

【中文标题】如何在 Flutter 中选择项目时更改卡片颜色?【英文标题】:How to change card color upon selection of an item in Flutter? 【发布时间】:2022-01-18 00:52:46 【问题描述】:

我在从模型中获取的 gridView 中列出了多张卡片。我想在选择卡片时更改特定卡片的背景颜色。也就是说,当我触摸卡片时,我希望那张卡片的颜色发生变化,如果我选择另一张卡片,我希望第一张卡片的颜色恢复到原来的颜色,并希望第二张卡片的颜色发生变化。我尝试了各种方法,但都做不到。

网格视图:

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];
                         );
                         
                     );
                  ),
                ),
              ),

型号:

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),

...

  ;

【问题讨论】:

【参考方案1】:

在状态类上创建一个可为空的 int 并基于它传递颜色,并更改 onTap: 上的索引 喜欢

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

【讨论】:

它有效,但是当我点击一张卡片时,所有卡片都在改变颜色。 抱歉没有注意到,请查看更新答案。 感谢您的帮助。它创造了奇迹!

以上是关于如何在 Flutter 中选择项目时更改卡片颜色?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中选择时更改 ListTile 的背景颜色

Flutter Using ListView.Builder:如何在我选择的所有项目上仅更改一项的背景颜色

如何在材质 ui 卡中悬停时更改文本颜色?我想更改卡片悬停时的文本颜色而不是悬停在文本上?

如何更改 Flutter 中提升按钮的选定文本的颜色?

根据 alertdialog 选项更改卡片颜色

在 html 选择中悬停或选择项目时,如何避免更改背景颜色?