在Flutter中切换容器

问题描述

如何在所附图像中实现背景的自定义切换类型。我想在onTap上更改背景颜色和图标更改。enter image description here

 GestureDetector(
                                      onTap: () {
                                        if(white == Colors.blue)
                                          white = Colors.white;
                                        else
                                          white = Colors.white;

                                        setState(() {

                                        });
                                      },child: Container(
                                        width: 100,height: 100,color: white,),

解决方法

您可以轻松地为颜色和图标设置一个变量，以便在发生onTap时将更改该变量，然后更改setState。下面，我包含了一些代码，以进一步展示我要解释的内容。如果您在使用已编写的代码实现我的概念时遇到任何问题，请告诉我并向您展示一些代码，我可以为您提供帮助！

Widget theCard() {
    Color theColor;
    IconData theIcon;

    return GestureDetector (
        onTap: () {
            if(theColor == Colors.blue) {
                theColor = Color.white;
                theIcon = Icons.check;
            }
            else {
                theColor = Colors.blue;
                theIcon = Icons.remove;
            }
            setState(() {
            
            })
        },child: Container(
            color: theColor,child: Icon(theIcon)
        )
    )
}

您可以简单地在有状态的小部件中分隔该容器，并在状态类中使用变量来控制是否切换容器。

示例：

var _isToggled = false

请注意，您可以根据情况在开始时以true或false开头，然后将此变量与条件一起使用来确定背景色和图标色。

示例：

color: _isToggled? Colors.blue : Colors.white

您要做的最后一件事是，通过调用setState（）在onTap方法内切换该变量的值，以反映使用变量的新值重建小部件，这将改变条件的评估结果以移至其他情况。

示例：

onTap: (){
    setState(){
        _isToggled = !_isToggled;
    }}

通过这种方法，您将拥有一个满足您的需求的独立小部件！

祝你有美好的一天！

button button gesture toggle