flutter - 我已经用 api 的 listview.builder 创建了一个卡片列表。现在我想在点击一张卡片时更改墨水池点击中的卡片颜色

Question

我想在点击卡片时更改卡片颜色。我做了所有的功能。我也设置了墨水池来敲击。一切都准备好了，但我很困惑如何在点击时更改特定的卡片颜色。尝试使用 bool 更改卡片颜色。但是当我点击一张卡片时，所有卡片的颜色都会改变。这不是我想要的。我希望只有一种卡片在被点击时改变颜色。

isPressed ? Colors.blueAccent : Colors.white,

 InkWell(
                              onTap: () {
                                setState(() {
                                  isPressed = !isPressed;
                                });
  

在 listview.builder 中，我可以从 api 获取卡片中的数据。

  ListView.builder(
                        itemCount: widget.notification == null
                            ? 0
                            : widget.notification.length,
                        itemBuilder: (context, index) { 
    return
    
    
     Card(
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10.0)),
                          color: isPressed ? Colors.blueAccent : Colors.white,
                          child: Padding(
                            padding: EdgeInsets.all(16.0),
                            child: InkWell(
                              onTap: () {
                                setState(() {
                                  isPressed = !isPressed;
                                });
                                Navigator.push(
                                    context,
                                    new MaterialPageRoute(
                                        builder: (BuildContext context) =>
                                            new DetailPage()));
                              },
                              child: Column(
                                children: <Widget>[
                                  Row(
                                    children: [
                                      SizedBox(
                                        width: 20,
                                      ),
                                      Text(
                                        'Status',
                                        style: TextStyle(
                                            fontWeight: FontWeight.bold),
                                      ),
                                      SizedBox(
                                        width: 67,
                                      ),
                                      Text(widget.notification[index]["data"]
                                              ["message"]
                                          .toString()),
                                    ],
                                  ),

Answer 1

你可以试试这个例子。复制粘贴代码

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: 5,
        itemBuilder: (context, index) {
          return MyCard(isPressed: false);
        });
  }
}

class MyCard extends StatefulWidget {
  final bool isPressed;

  const MyCard({Key key, this.isPressed}) : super(key: key);
  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  bool _isPressed;

  @override
  void initState() {
    _isPressed = widget.isPressed;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      color: _isPressed ? Colors.blueAccent : Colors.white,
      child: InkWell(
        onTap: () {
          setState(() {
            _isPressed = !_isPressed;
          });
        },
        child: Container(
          height: 50,
        ),
      ),
    );
  }
}