为什么我不能在 Flutter 的列中水平居中 SizeTransition？

Question

请检查以下代码。 无论我尝试了什么，SizeTransition 都不会在列中水平居中。 我试图将 Column 包装在 Container 中，然后提供无限宽度。 我试图将 SizeTransition 包装在一个中心。 我试图将 SizeTransition 包装在一个具有中心 alignment 属性的容器中。 我试图将它包装在一个堆栈中。 我试图给容器孩子 alignment 中心属性等......但它们都不起作用......

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(

Answer 1

我可以看到您已经尝试了很多事情，这是我的一些想法：

＃1

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: // ...
)

要么

＃2

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch, // critical
  children: <Widget>[
    // ...,
    Container(
      alignment: Alignment.center, // critical
      child: SizeTransition(
        child: Container(
          width: 200.0,
          height: 200.0,
          color: Colors.blue,
        ),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: _controller,
        ),
      ),
    ),
  ]
)

---

更新资料

确实存在SizeTransition小部件的一个特殊方面。

它的axis属性默认情况下设置为Axis.vetical ，它将覆盖小部件的水平对齐方式为-1.0 （开始）和垂直对齐方式为0.0 （中心）。

将该属性更改为Axis.horizontal可使事情以另一种方式起作用-将小部件水平对齐到0.0 （中心），垂直对齐-1.0 （开始）。

解：

SizeTransition(
  axis: Axis.horizontal,
  // ...,
)

请告诉我是否有帮助。

Answer 2

尽管我以前的回答在某种程度上解决了这个问题，但我也想解决SizeTransition小部件的局限性以及如何解决这个问题。

SizeTransition提供了“展开”其内容的效果，通过重写对齐设置在水平或垂直轴上运行动画。

为了在不破坏对齐规则的情况下达到相同的效果，还应避免使用ScaleTransition小部件，因为我们需要“展开/显示”动画而不是“按比例放大”-这是我的建议：

@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"),
        ),
      )
    ]
  );
}

这基本上是一个AnimatedBuilder小部件，具有与SizeTransition相同的ClipRect和Align ，不同之处在于它仅将对齐限制为一个轴。

---

如果您希望动画同时在水平轴和垂直轴上运行-将相同的_animation.value分配给widthFactor属性：

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

这将帮助您实现“从中心显示”效果，而无需放大和缩小窗口小部件的内容。

Answer 3

如果您使用动画列表视图，则可以使用幻灯片过渡，只需将您的列包裹在幻灯片过渡小部件周围，您应该对 go 很好

SlideTransition(
   position: Tween<Offset>(
     begin: const Offset(0, -1), //The animated item will move upwards, use +1 to move downwards
     end: Offset.zero,
   ).animate(
     CurvedAnimation(parent: widget.animation, curve: Curves.fastOutSlowIn),
   ),
   child: Column()
)

widget.animation 是您的Animation<double>变量（如果在有状态小部件内）