flutter - 为什么我不能将SizeTransition水平居中于Flutter中的列？

请检查以下代码。不管我怎么做，sizeTransition并不是水平居中的。我试图将列包装在一个容器中，然后提供无限的宽度。我试着把sizetransition包在一个中心。我试图将sizetransition包装在具有中心对齐属性的容器中。我想把它叠起来。我试着给集装箱孩子以对齐中心属性等…但它们都不起作用…

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: AnimatedBox(),
    );
  }
}

class AnimatedBox extends StatefulWidget {
  @override
  createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RaisedButton(
          child: Text('animate forward'),
          onPressed: () {_controller.forward();},
        ),
        RaisedButton(
          child: Text('animate reverse'),
          onPressed: () {_controller.reverse();},
        ),
        const SizedBox(height: 100.0,),
        SizeTransition(
          child: Container(
            width: 200.0,
            height: 200.0,
            color: Colors.blue,
          ),
          sizeFactor: CurvedAnimation(
            curve: Curves.fastOutSlowIn,
            parent: _controller,
          ),
        ),
      ],
    );
  }
}

例如，以下代码不适用于SizeTransition，但适用于ScaleTransition。我不知道SizeTransition出了什么问题。

return Container(
      width: double.infinity,
      child: Column(

最佳答案

尽管我以前的答案在某种程度上解决了这个问题，但我还想说明小部件有多有限以及如何解决这个问题。
sizeTransition提供“展开”其内容的效果，通过重写对齐设置以水平或垂直轴运行动画。
为了在不破坏对齐规则的情况下实现相同的效果，同时避免使用SizeTransition小部件，因为我们需要“展开/显示”动画而不是“放大”-我建议：

@override
Widget build(BuildContext context) {
  final _animation = CurvedAnimation(parent: _controller, curve: Curves.fastOutSlowIn);
  return Column(
    children: <Widget>[
      // ...,
      AnimatedBuilder(
        animation: _animation,
        builder: (_, child) => ClipRect(
          child: Align(
            alignment: Alignment.center,
            heightFactor: _animation.value,
            widthFactor: null,
            child: child,
          ),
        ),
        child: Container(
          width: 200.0,
          height: 200.0,
          color: Colors.blue,
          child: Text("test"),
        ),
      )
    ]
  );
}

这基本上是一个ScaleTransition小部件，与AnimatedBuilder中使用的小部件相同，只是它只将对齐限制在一个轴上。
如果希望动画同时在水平和垂直轴上运行-请将相同的ClipRect指定给Align属性：

Align(
  alignment: Alignment.center,
  heightFactor: _animation.value,
  widthFactor: _animation.value,
  child: child,
),

这将帮助您在不缩放小部件内容的情况下实现“从中心显示”效果。

关于flutter - 为什么我不能将SizeTransition水平居中于Flutter中的列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56315392/