在 Flutter 中切换容器

Question

如何实现附图中背景的自定义切换类型。我想在点击时更改背景颜色和图标更改。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,
                                      ),
                                    ),

Answer 1

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

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)
        )
    )
}

Answer 2

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

示例：

var _isToggled = false

请注意，您可以根据您的情况最初使用 true 或 false 启动它，然后使用此变量和条件来决定背景颜色和图标颜色。

示例：

color: _isToggled? Colors.blue : Colors.white

您应该做的最后一件事是通过调用 setState() 在 onTap 方法中切换该变量的值，以反映使用变量的新值重建小部件，这将改变要移动的条件的评估结果另一种情况。

示例：

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

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

祝你有愉快的一天！

在 Flutter 中切换容器

Toggle container in Flutter

button

toggle

gesture

flutter