Question

这是一个动画容器中的按钮，用于对尺寸和颜色的变化进行动画处理。但是，应在点击时更改的按钮状态仅是局部更改变量，而不是整个窗口小部件。

开始点击时，打印始终为“空闲”，最后，打印始终为“加载”。但没有任何变化，再次点击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");
}

Answer 1

我尝试单击此按钮，并在控制台中获得以下结果。我还为按钮获得了3种渲染状态：确认，加载，成功

flutter: CustomButtonState.idle
flutter: changing to: CustomButtonState.loading
flutter: changed to: CustomButtonState.loading
flutter: after ontap: CustomButtonState.loading
flutter: CustomButtonState.loading
flutter: changing to: CustomButtonState.success
flutter: changed to: CustomButtonState.success
flutter: after ontap: CustomButtonState.success
flutter: CustomButtonState.success
flutter: changing to: CustomButtonState.idle
flutter: changed to: CustomButtonState.idle
flutter: after ontap: CustomButtonState.idle

我认为GestureDetector应该包装整个AnimatedContainer，因为现在此按钮仅在单击文本时更改其状态，而不是整个容器。

Flutter：即使使用setState（）将其包围，变量也不会更新它

1 个答案: