【发布时间】：2020-09-03 12:27:36
【问题描述】：
这是动画容器中的一个按钮，用于对尺寸和颜色的变化进行动画处理。然而，点击时应该改变的按钮状态只是局部改变变量而不是整个小部件。
当开始点击时，打印总是“空闲”，最后打印总是“加载”。但没有任何变化，再次点击时 buttonState 仍然处于空闲状态。
树中的容器：
AnimatedContainer(
curve: Curves.easeOutCubic,
duration: Duration(milliseconds: 1000),
height: sHeight * 0.07,
width: _buttonState == CustomButtonState.idle
? sWidth * 0.7
: _buttonState == CustomButtonState.loading
? sHeight * 0.07
: _buttonState == CustomButtonState.fail
? sWidth * 0.7
: sWidth * 0.7,
padding: EdgeInsets.symmetric(
horizontal: sWidth * kcardHorizontalMargin,
),
decoration: BoxDecoration(
color: _buttonState == CustomButtonState.idle
? Colors.grey.shade500
: _buttonState == CustomButtonState.loading
? kblueColor
: _buttonState == CustomButtonState.fail
? kredColor
: ksecondaryColor,
borderRadius: BorderRadius.circular(25)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
child: _buttonState == CustomButtonState.idle
? Container(
child: Text(
'Confirm',
style: kloginButtonText.copyWith(
color: ksecondaryColor),
),
)
: _buttonState == CustomButtonState.loading
? Container(
child: CircularProgressIndicator(
backgroundColor: ksecondaryColor,
),
)
: _buttonState == CustomButtonState.fail
? Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Icon(
Icons.cancel,
color: kredColor,
),
Container(
child: Text(
'Fail',
style: kloginButtonText
.copyWith(
color:
ksecondaryColor),
),
),
],
)
: Row(
mainAxisAlignment:
MainAxisAlignment
.spaceBetween,
children: [
Icon(
Icons.check,
color: ksecondaryColor,
),
Container(
child: Text(
'Success',
style: kloginButtonText
.copyWith(
color:
ksecondaryColor),
),
),
],
),
onTap: () {
print(_buttonState);
if (_buttonState == CustomButtonState.idle) {
changeButtonState(
CustomButtonState.loading);
} else if (_buttonState ==
CustomButtonState.loading) {
changeButtonState(CustomButtonState.success);
} else {
changeButtonState(CustomButtonState.idle);
}
print("after ontap: $_buttonState");
},
),
],
),
),
自定义按钮状态：
enum CustomButtonState { idle, loading, success, fail }
changeButtonState 方法：
CustomButtonState changeButtonState(CustomButtonState state) {
print("changing to: $state");
switch (state) {
case CustomButtonState.idle:
setState(() {
_buttonState = CustomButtonState.idle;
});
break;
case CustomButtonState.loading:
setState(() {
_buttonState = CustomButtonState.loading;
});
break;
case CustomButtonState.fail:
setState(() {
_buttonState = CustomButtonState.fail;
});
break;
case CustomButtonState.success:
setState(() {
_buttonState = CustomButtonState.success;
});
break;
}
print("changed to: $_buttonState");
}
【问题讨论】：