Анимируйте ширину двух контейнеров с помощью анимированного контейнера - PullRequest
Новая
       26

Анимируйте ширину двух контейнеров с помощью анимированного контейнера

0 голосов
/ 06 августа 2020

У меня есть два виджета, 

Widget FirstWidget()
{
 return Container(
          height: 40,
          child: new Text('Food Products',style: TextStyle(color: Colors.gray))
          decoration: new BoxDecoration(
              borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
              border: Border.all(width: 2, color:Colors.gray)),
          padding: new EdgeInsets.all(12.0),
        )
}

Widget SecondWidget()
{
 return Container(
          height: 40,
          child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text('Food Products',
              TextStyle(color: Colors.blue),
          SizedBox(width:8),
          Icon(Icons.check,color:Colors.blue ,size: 24,)
        ],),
decoration: new BoxDecoration(
              borderRadius: new BorderRadius.all(new Radius.circular(4.0)),
              border: Border.all(width: 2, color:Colors.red)),
          padding: new EdgeInsets.all(12.0),
        )
}

Теперь мне нужно анимировать два виджета на основе выбора, 

class BasicProduct extends StatefulWidget {
  final String name;
  final bool isSelected;

  BasicProduct({Key key, @required this.name, this.isSelected = false});
  
  @override
  State<StatefulWidget> createState() => _BasicProduct(name, isSelected);
}

class _BasicProduct extends State<BasicProduct> {
  final String name;
  bool _isSelected;
  
  _BasicProduct(this.name, this._isSelected);

  @override
  Widget build(BuildContext context) {
 Widget _myAnimatedWidget = _isSelected ?  SecondWidget() : FirstWidget();
    return new GestureDetector(
        onTap: () {
          setState(() {
            _isSelected = !_isSelected;
_myAnimatedWidget =
        _isSelected
            ? SecondWidget()
            : FirstWidget();

          });
        },
        child: AnimatedContainer(
        key : _animatedContainerKey
        duration: const Duration(seconds: 1),
width: boxWidth
        child: _myAnimatedWidget
);
  }
}

Как получить ширину для двух виджетов для анимации ?

Пробовал вызвать WidgetsBinding.instance.addPostFrameCallback ((_) => getSize) в initState, чтобы получить размер 

getSize()
{
var boxWidth = _animatedContainerKey.currentContext.findRenderObject().size.width;
}

Этот размер возвращается только для второго виджета при изменении firstWidget , Размер возвращается только для SecondWidget.

Может ли кто-нибудь помочь, как решить проблему?

1 Ответ

0 голосов
/ 07 августа 2020

Я бы подошел к этому иначе. Во-первых, если вы можете, вам следует попробовать использовать виджет AnimatedCrossFade - он автоматически обрабатывает как затухание, так и изменение размера между двумя разными виджетами. Если вы можете сделать так, чтобы вместо того, чтобы указывать точный размер в ваших виджетах (всегда плохая идея), они просто соответствовали доступному пространству, тогда это должно делать то, что вы хотите. Однако без более подробной информации о том, что вы на самом деле пытаетесь достичь с помощью sh анимации и размера виджетов, немного сложно помочь.

Если это не сработает, вам следует подумать используя AnimationController и виджет, наследующий AnimatedWidget. Таким образом, у вас есть полный контроль над процессом сборки ваших двух виджетов - вы можете изменять их размер, положение и затухание, как хотите, с помощью стека + непрозрачности или того, что вам больше подходит.

Я бы обычно напишите пример, но я думаю, что это немного выходит за рамки этого ответа, однако вы можете найти здесь пример анимированного виджета: https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html. Если вам действительно нужно пройти go по этому маршруту и ​​вы не можете понять, было бы полезно, если бы вы могли добавить больше деталей о том, что вы пытаетесь выполнить sh вместо того, что вы пытались сделать, чтобы свершилось sh ит.

...