没有使用 AnimatedSwitcher 或 AnimatedOpacity 的动画

Question

我正在学习颤振，并且我正在使用动画系统。

我创建了一个单选按钮，它是一个在被点击时应该被填充的圆圈。

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

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

   GestureDetector -> Container -> AnimatedSwitcher -> _animatedWidget

_animatedWidget 是一个 Widget，当我单击时会发生变化（在 GestureDetector onTap 我做 _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 的完整容器增加到 1），但它甚至没有改变视图，但是，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,
            )),
      ),
    ),
  );
}