没有使用 AnimatedSwitcher 或 AnimatedOpacity 的动画

Question

我正在学习 flutter 并且我正在使用动画系统。

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

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

在状态class，我建立了一个：

   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();          
        });
      }


  }

这段代码无法正常工作，它应该在满容器中淡出并在空容器中淡出，但相反，它只是弹出并弹出（就像 classic 更改一样）

这是我所在州的完整代码 class :


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,
            )),
      ),
    ),
  );
}

没有使用 AnimatedSwitcher 或 AnimatedOpacity 的动画

No Animation with AnimatedSwitcher or AnimatedOpacity

dart

flutter

flutter-layout

flutter-animation