flutter - 为什么我不能在 Flutter 的 Column 中水平居中 SizeTransition？

Question

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

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

尽管我之前的回答在一定程度上解决了这个问题，但我还想解决 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,
),

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