Flutter，如何在 StackWidget 中的 PositionedWidget 中设置对齐？答案

【问题标题】：Flutter, How to set Alignment in a PositionedWidget in a StackWidget?Flutter，如何在 StackWidget 中的 PositionedWidget 中设置对齐？
【发布时间】：2020-11-13 17:30:20
【问题描述】：

如何使动画居中？我正在使用https://pub.dev/packages/simple_animations 包。

我有一个包含多个定位小部件的堆栈，其中动画作为子级。问题是动画不是从中心动画，而是从左上角动画。这是只有一个位于堆栈内的代码。

有谁知道如何让动画从中心开始？

谢谢

Stack(children: [
Positioned(
  right: 15.0,
  top: 10.0,
  child: AnimRectangle(),
)],);


enum AniProps { width, height, color }

class AnimRectangle extends StatelessWidget {

  final tween = MultiTween<AniProps>()
    ..add(AniProps.width, 0.0.tweenTo(40.0), 1000.milliseconds)
    ..add(AniProps.width, 40.0.tweenTo(5.0), 500.milliseconds)
    ..add(AniProps.height, 0.0.tweenTo(50.0), 2500.milliseconds)
    ..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 3.seconds);

  @override
  Widget build(BuildContext context) {
    return PlayAnimation<MultiTweenValues<AniProps>>(
            tween: tween, // Pass in tween
            duration: tween.duration, // Obtain duration from MultiTween
            builder: (context, child, value) {
              return Container(
                width: value.get(AniProps.width), 
                height: value.get(AniProps.height),
                color: value.get(AniProps.color),
              );
            },
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout flutter-animation flutter-positioned

【解决方案1】：

我在 Positioned Widget 中放置了一个 SizedBox 解决了这个问题！

Stack(children: [
Positioned(
  right: 15.0,
  top: 10.0,
  child:SizedBox(
    height: 60,
    width: 60,
  child: AnimRectangle(),
  ),
)],);

【讨论】：

【解决方案2】：

您可以简单地使用Stack 中的alignment 选项

child: Stack(
  alignment: Alignment.center,
  children: <Widget>[

  ],
),

【讨论】：

对齐对我不起作用：Alignment.center，
堆栈允许您将元素堆叠在一起，数组中的最后一个元素具有最高优先级。您可以使用对齐、定位或容器来定位堆栈的子级