flutter - 没有带有AnimatedSwitcher或AnimatedOpacity的动画

Question

我正在学习 flutter ，并且在动画系统中有行为。

我创建了一个单选按钮，该按钮是一个圆形，单击时应填充该圆形。

我创建了一个有状态的窗口小部件类和一个状态类。

在状态类中，我构建了一个:

   GestureDetector -> Container -> AnimatedSwitcher -> _animatedWidget

_animatedWidget是一个单击后会更改的窗口小部件(在“Tap上的GestureDetector”中，我执行_changeSelect)

  void _changeSelect(){
    _isSelected = !_isSelected;
      if(_isSelected){
        setState(() {
          _animatedWidget = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black));
        });
      }
      else{
        setState(() {
          _animatedWidget = Container();          
        });
      }


  }

而且此代码无法正常工作，它应该淡入完整容器并淡出空容器，但是，它只是弹出然后弹出(就像经典更改一样)

这是我的状态类的完整代码:

class _RadioButtonState extends State<RadioButton> {

  Widget _animatedWidget = Container();


  bool _isSelected = false;

  bool isSelected(){
    return _isSelected;
  }

  void _changeSelect(){
    _isSelected = !_isSelected;
      if(_isSelected){
        setState(() {
          _animatedWidget = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black));
        });
      }
      else{
        setState(() {
          _animatedWidget = Container();          
        });
      }


  }

  @override
  Widget build(BuildContext context){
    return GestureDetector(
      onTap: _changeSelect,
      child:
        Container(
          width: 16.0,
          height: 16.0,
          padding: EdgeInsets.all(2.0),
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(width: 2.0, color: Colors.black)
          ),
          child: AnimatedSwitcher(
            duration: Duration(seconds: 1),
            child: _animatedWidget,
          )

        ),
    );
  }
}

注意:我还尝试了AnimatedOpacity而不是AnimatedSwitcher(单击时将起始不透明度为0的完整Container增大为1)，但它甚至都没有改变 View ，但是，javascript似乎在持续时间内正常工作

Answer 1

这是您要找的东西吗？

Widget _animatedWidget = Container();

bool _isSelected = false;

bool isSelected() {
  return _isSelected;
}

void _changeSelect() {
  _isSelected = !_isSelected;
  if (_isSelected) {
    setState(() {
      _animatedWidget = Container(
        key: ValueKey(1),
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
      );
    });
  } else {
    setState(() {
      _animatedWidget = Container(
        key: ValueKey(2),
      );
    });
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: GestureDetector(
        onTap: _changeSelect,
        child: Container(
            width: 66.0,
            height: 66.0,
            padding: EdgeInsets.all(2.0),
            decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(width: 2.0, color: Colors.black)),
            child: AnimatedSwitcher(
              duration: Duration(seconds: 1),
              child: _animatedWidget,
            )),
      ),
    ),
  );
}