使用动画容器为两个容器宽度设置动画

Question

我有两个小部件，

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

如何获取两个小部件的宽度以进行动画处理？

尝试在initState中调用WidgetsBinding.instance.addPostFrameCallback((_)=> getSize)获取Size

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

这个Size只为SecondWidget返回，当firstWidget改变时，只为SecondWidget返回Size。

谁能帮忙解决这个问题？

Answer 1

我会对此采取不同的方法。一方面，如果可以的话，你应该尝试使用AnimatedCrossFade 小部件——它会自动处理两个不同小部件之间的淡入淡出和大小变化。如果您可以做到这一点，而不必在小部件中指定确切的大小（总是一个坏主意），它们只需适合可用空间，那么这应该可以满足您的需求。但是，如果没有更多关于您实际尝试使用小部件的动画和大小来完成什么的详细信息，这有点难以提供帮助。

如果这不起作用，那么您应该考虑使用 AnimationController 和继承 AnimatedWidget 的小部件。通过这种方式，您可以完全控制两个小部件的构建过程 - 您可以使用堆栈 + 不透明度或其他任何最适合您的方式调整它们的大小、位置和淡化它们的大小。

我通常会写一个例子，但我认为这有点超出了这个答案的范围，但是你可以在这里找到一个动画小部件的例子：https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html。如果您确实需要沿着这条路线走并且无法弄清楚，那么如果您可以添加更多关于您正在尝试完成的任务而不是您尝试完成的任务的详细信息将会有所帮助。