(Flutter, dart) 如何在 Listview 中选择特定的 Card 并将图标颜色从白色切换到绿色

Question

我有一个列表视图，它可以从地图中获取属性，例如图片以及点击次数。我想知道如何更改颜色，以便在特定卡片上显示绿色复选框图标。就像现在一样，我只能一次更改所有卡片上所有复选框的颜色。我想我希望能够只选择点击的卡片，以便其复选框变为绿色。这是最相关的代码：

主要：

return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView.builder(
            itemCount: widget._passoverCol.keys.length,
            itemBuilder: (BuildContext context, int index) 
             

              return Container(
                  height: 100,
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      myCard(
                        fileName: widget._passoverCol.keys.elementAt(index),
                       

                        displayName: widget._passoverCol.values
                            .elementAt(index)
                            .displayName,
                        

                        tapsCount: widget._passoverCol.values
                            .elementAt(index)
                            .tapsCount,
                        

                        color: cardColor,
                        onTap: () {
                          setState(() {
                            cardColor = Colors.green;
});
                        },
                      ),
                      
                    ],
                  ));
            }),
      ),
    );
  }
}

卡片：

class myCard extends StatefulWidget {
  const myCard({
    required this.tapsCount,
    required this.fileName,
    required this.displayName,
    this.onTap,
    this.color,
  });

  final int? tapsCount;
  final String? fileName;
  final String? displayName;
  final Color? color;
  final Function()? onTap;

  @override
  _myCardState createState() => _myCardState();
}

class _myCardState extends State<myCard> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: widget.onTap!,
      child: Card(
        child: Row(
          children: <Widget>[
            Expanded(
                child: Image.asset(
              //getImageFile()
              widget.fileName!,
              height: 100.0,
              width: 100.0,
            )),
            Padding(
              padding: const EdgeInsets.only(left: 32.0),
              child: Text(widget.displayName!),
            ),
            SizedBox(
              width: 15.0,
            ),
            Padding(
              padding: const EdgeInsets.only(right: 12.0),
              child: Text(
                widget.tapsCount!.toString(),
              ),
              
            ),
            Icon(FontAwesomeIcons.check, color: widget.color!),
            SizedBox(
              width: 200.0,
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

您可以将白色列表用于特定卡片；否则在_passoverCol 中设置一个颜色属性，默认值为白色。

List<Color> colors = [Colors.white,Colors.white,Colors.white,Colors.white,Colors.white];

color: colors[index],
setState(() {
          colors[index] = Colors.green;
  });
},

//  set a color property in _passoverCol class  and change it like this
setState(() {
          widget._passoverCol.values
                .elementAt(index)
                .color = Colors.green;
  });
},

Answer 2

非常感谢你们！我决定去@BloodLoss 回答！我不得不修改一点。我将地图键转换为列表。然后我在 onTap 中使用了该变量，正如您在我的代码中看到的那样，这非常像解决方案：

主要：

var keys = widget._passoverCol.keys.toList();

return Container(
                  height: 100,
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      foodCard(
                        fileName: widget._passoverCol.keys.elementAt(index),
                        

                        displayName: widget._passoverCol.values
                            .elementAt(index)
                            .displayName,
                        

                        tapsCount: widget._passoverCol.values
                            .elementAt(index)
                            .tapsCount,
                        

                        color: selectColorKey!.contains(keys[index])
                            ? Colors.green
                            : Colors.white,
                        onTap: () {
                          setState(() {
                            selectColorKey!.add(keys[index]);
                          });
                        },

Answer 3

创建数组来存储您的点击键。

List<String> selectColorKey = [];

向数组添加键

selectColorKey.add(widget._passoverCol.keys.elementAt(index));

如果您想在再次点击时从阵列中删除或单击删除按钮

 selectColorKey.removeWhere((e) => e == widget._passoverCol.keys.elementAt(index));

检查逻辑

if(selectColorKey.contains(widget._passoverCol.keys.elementAt(index))) {
// set color to green
} else {
// set default color
}

您的完整代码

return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: ListView.builder(
            itemCount: widget._passoverCol.keys.length,
            itemBuilder: (BuildContext context, int index) 
              return Container(
                  height: 100,
                  padding: const EdgeInsets.all(8.0),
                  child: Stack(
                    children: <Widget>[
                      myCard(
                        fileName: widget._passoverCol.keys.elementAt(index),
                       

                        displayName: widget._passoverCol.values
                            .elementAt(index)
                            .displayName,
                        

                        tapsCount: widget._passoverCol.values
                            .elementAt(index)
                            .tapsCount,
                        

                        color:selectColorKey.contains(widget._passoverCol.keys.elementAt(index))? Colors.green:Colors.white,
                        onTap: () {
                          setState(() {selectColorKey.add(widget._passoverCol.keys.elementAt(index));
});
                        },
                      ),
                      
                    ],
                  ));
            }),
      ),
    );
  }
}