更新

Question

请检查以下代码。无论我尝试了什么，SizeTransition都不会在Column中水平居中。我试图将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

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

＃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小部件，其使用的ClipRect和Align与SizeTransition中的相同，只是它只将对齐方式限制为一个轴。

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

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

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

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

2 个答案:

更新