Question

因此，我一直在创建一个家庭自动化应用程序，为此我使用了自定义按钮，但是碰巧不是最好的方法，所以我制作了卡片。该卡位于InkWell内的容器内，该容器正是为了确定卡的宽度和高度。该卡的初始颜色为背景灰色，文本和图标为白色，但是当我点击它时，我希望它为背景白色，文本和图标为黑色。将来，我将与MQTT一起使用，因此我需要onTap可以正常工作

当我使用按钮时，它工作良好：

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

但是现在使用Card似乎不起作用，以后我将有一堆Card，我将尝试将它们添加到功能中，因为我只需要为将来的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),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

自定义按钮： CustomCard（ iconData：Icons.lightbulb_outline，文字：“Lâmpada0 Schuma”， isActive：cardsValue [0]， onTap：（）{ setState（（）{ cardsValue [0] =！cardsValue [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];
                  });
                },
              ),
            ),
          );
        },
      ),
    ),
  );
}

使用InkWell更改卡的颜色和onTap上的文本

1 个答案: