使用InkWell改变卡片的颜色和文字。

Posted 2021-04-11

所以，我一直在创建一个家庭自动化的应用程序，我是用一个自定义的按钮这些，但遇到它不是最好的方式，所以我做了一个卡。这张卡是在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),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

Custom Button:CustomCard( iconData: Icons.lightbulb_outline, text: 'Lâmpada 0 Schuma', isActive: cardsValue[0], onTap: () { setState(() { cardsValue[0] = !cardValue[0]; }); }, ),

答案

试着用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];
                  });
                },
              ),
            ),
          );
        },
      ),
    ),
  );
}