Flutter 使用InkWell更改卡片颜色和文本onTap

所以，我一直在创建一个家庭自动化应用程序，我使用了一个自定义按钮，但它不是最好的方式，所以我制作了一张卡片。这张卡片是在墨水池里的一个容器里，这个容器正好可以让我确定卡片的宽度和高度。这张卡片的初始颜色为背景灰色，文本和图标为白色，但当我点击它时，我希望它是背景白色，文本和图标为黑色。将来，我将使用MQTT，因此当我使用按钮时，我需要onTap能够正常工作。这很好：

style: TextStyle(color: btn ? Colors.white : Colors.grey[800]),

但是现在这张卡似乎不起作用了，我以后会有一堆卡，我会尝试将它们添加到一个函数中，因为我只需要为将来的CAD更改文本和图标。 这是我尝试的InkWell卡的代码：

InkWell(
                        onTap: (){
                        },
                          child: Container(
                          height: 90,
                          width: 90,
                          child: Card(
                            color: btn ? Colors.white : Colors.grey[800],
                            semanticContainer: true,
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(10),
                            ),
                            margin: new EdgeInsets.all(0),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Row(
                                  children: <Widget>[
                                    Padding(
                                      padding: EdgeInsets.only(top: 5, right: 25, bottom: 10),
                                      child: Icon(
                                        Icons.lightbulb_outline,
                                        color: Colors.white,
                                        size: 35,
                                      ),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                                      child: new Text(
                                        "On",
                                        //style: TextStyle(color: btn ? Colors.white : Colors.grey[800]),
                                        style: TextStyle(color: Colors.white),
                                      ),
                                    ),
                                  ],
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 8, left: 5),
                                  child: Text(
                                    'Lâmpada 1 Schuma',
                                    style: TextStyle(color: Colors.white, fontSize: 13),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

自定义按钮： 海关卡 Iconda:Icons.lightbull\u轮廓， 文本：“L–mpada 0 Schuma”， isActive:cardsValue[0]， onTap：{ 设定状态{ cardsValue[0]=！cardsValue[0]； }; },

---

，

尝试使用setState更新布尔变量的状态我将名称btn更改为isActive：

卡的类别：

class CustomCard extends StatelessWidget {
  final bool isActive;
  final String text;
  final IconData iconData;
  final VoidCallback onTap;

  const CustomCard({
    this.isActive,
    this.text,
    this.iconData,
    this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: onTap,
      child: Container(
        height: 90,
        width: 90,
        child: Card(
          color: isActive ? Colors.white : Colors.grey[800],
          semanticContainer: true,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          margin: new EdgeInsets.all(0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Row(
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.only(top: 5, right: 25, bottom: 10),
                    child: Icon(
                      Icons.lightbulb_outline,
                      color: isActive ? Colors.grey : Colors.white,
                      size: 35,
                    ),
                  ),
                  Padding(
                    padding:
                        EdgeInsets.only(top: 0, right: 0, bottom: 20, left: 0),
                    child: new Text(
                      isActive ? 'On' : 'Off',
                      style: TextStyle(
                          color: isActive ? Colors.grey[800] : Colors.white),
                    ),
                  ),
                ],
              ),
              Padding(
                padding: EdgeInsets.only(top: 8, left: 5),
                child: Text(
                  text,
                  style: TextStyle(
                      color: isActive ? Colors.grey[800] : Colors.white,
                      fontSize: 13),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在另一个屏幕上调用：

List<bool> cardsValue = [false, false];

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: Center(
      child: ListView.builder(
        shrinkWrap: true,
        itemCount: cardsValue.length,
        itemBuilder: (_, index) {
          return Align(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: CustomCard(
                iconData: Icons.lightbulb_outline,
                text: 'Lâmpada 1 Schuma',
                isActive: cardsValue[index],
                onTap: () {
                  setState(() {
                    cardsValue[index] = !cardsValue[index];
                  });
                },
              ),
            ),
          );
        },
      ),
    ),
  );
}

---

它工作得很好，你能帮我把它放到一个可调用的函数中吗？所以我只需要传递文本、图标参数和设置状态。如果我有另一张自定义卡，当我按下它时，它会激活两张卡，但我假设只激活我按下的那张卡，我应该修复什么？要修复这个问题，你需要向每个自定义卡传递不同的值。您可以创建两个不同的bool变量，如isActive1和isActive2，或者使用更好的方法创建一个列表actives=[false，false]；然后使用ListView.builder创建CustomCards，并根据索引更改值。我刚才在custom按钮内做了此操作，但在CustomCard类小部件内，我应该创建一个列表吗？如果你能用这个更新答案，效果很好，我没有把我的按钮添加到列表视图中，有什么问题吗？