Нет анимации с AnimatedSwitcher или AnimatedOpacity - PullRequest
Новая
       7

Нет анимации с AnimatedSwitcher или AnimatedOpacity

1 голос
/ 29 февраля 2020

Я изучаю флаттер и у меня поведение с системой анимации.

Я создал переключатель, представляющий собой круг, который должен заполняться при нажатии.

I создал класс виджета с состоянием и класс состояния.

В классе состояний я создаю: 

   GestureDetector -> Container -> AnimatedSwitcher -> _animatedWidget

_animatedWidget - это виджет, который изменяется при нажатии (в 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();          
        });
      }


  }

И этот код не работает должным образом, он должен исчезнуть в полном контейнере и исчезнуть в пустом контейнере, но вместо этого он просто появляется и выскакивает (как изменение classi c) будет делать)

Вот полный код моего класса состояния: 


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 выглядит работающим в течение времени

1 Ответ

2 голосов
/ 29 февраля 2020

Это то, что вы ищете?

enter image description here

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