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）以获取大小

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

此Size仅返回SecondWidget，而更改firstWidget时，该Size仅返回SecondWidget。

任何人都可以帮助解决该问题吗？

Answer 1

我会采取另一种方法。例如，如果可以的话，您应该尝试使用AnimatedCrossFade 小部件-它会自动处理两个不同小部件之间的淡入淡出和大小变化。如果您可以做到这一点，而不必在小部件中指定确切的大小（总是一个坏主意），而它们仅适合可用空间，那么这应该可以做您想要的。但是，如果没有更多关于您实际要使用小部件的动画和大小来完成的细节，这将很难提供帮助。

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

我通常会写一个示例，但是我认为这超出了此答案的范围，但是您可以在此处找到一个动画小部件的示例：https://api.flutter.dev/flutter/widgets/AnimatedWidget-class.html。如果您确实需要走这条路而又无法弄清楚，那么可以添加更多关于您要完成的事情的详细信息，而不是添加要完成的工作的细节，这将有所帮助。 >

使用动画容器对两个容器的宽度进行动画处理

1 个答案: