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

Question

请检查以下代码。无论我尝试了什么，SizeTransition 都不会在列中水平居中。我试图将 Column 包装在 Container 中，然后提供无限宽度。我试图将 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(

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,
),

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

Answer 2

我可以看到你已经尝试了很多东西，这是我的一些想法：

#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,
  // ...,
)

如果这有帮助，请告诉我。