如何解决在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;
}}
通过这种方法,您将拥有一个满足您的需求的独立小部件!
祝你有美好的一天!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。