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

Question

所以，我一直在创建一个家庭自动化应用程序，我为这些应用程序使用了一个自定义按钮，但发现这不是最好的方法，所以我制作了一张卡片。这张卡片在 InkWell 内的一个容器内，这个容器正好可以让我确定卡片的宽度和高度。这张卡片的初始颜色为背景灰色，文本和图标为白色，但当我点击它时，我希望它为背景白色，文本和图标为黑色。未来我将使用 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),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

自定义按钮： 自定义卡（ iconData: Icons.lightbulb_outline, 文本：'Lâmpada 0 Schuma'， isActive: 卡片值[0], 点按：（）{ 设置状态（（）{ 卡片价值[0] = !卡片价值[0]; }); }, ),

Answer 1

尝试使用setState来更新bool变量的状态（我把名字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];
                  });
                },
              ),
            ),
          );
        },
      ),
    ),
  );
}