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

Posted 2023-03-28

【中文标题】我用 api 的 listview.builder 创建了一个卡片列表。现在我想在点击一张卡片时更改墨水池点击中的卡片颜色

【英文标题】：I have created a card list with listview.builder from api. Now i want to change a card color in inkwell tap when one card is tapped

【发布时间】：2021-02-05 03:13:43

【问题描述】：

我想在点击卡片时更改卡片颜色。我做了所有的功能。我也设置了墨水池来敲击。一切都准备好了，但我很困惑如何在点击时更改特定的卡片颜色。尝试使用 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()),
                                    ],
                                  ),

【问题讨论】：

在此处查看此示例：***.com/a/63496800/12789200

【参考方案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,
        ),
      ),
    );
  

【讨论】：

这是理解场景的好答案。谢谢