使用堆栈小部件在中心锚定动画小部件

Question

我正在尝试在屏幕上放置多个小部件。

其中一个小部件应该具有动画效果，而其余的则没有。我目前正在尝试使用堆栈小部件执行此操作，但动画运行时动画小部件锚定到我定义位置参数的任何位置。如果我定义 top: 100, left: 100 动画小部件此时使用锚点进行动画处理，而不是像使用常规列和行设置那样在其中心进行动画处理。

如何使动画小部件锚定在中心？

我尝试过的： 1. 使用带有正常左上角参数的堆栈小部件 2. 使用带有 positioned.fill 和对齐 Alignment.center 的堆栈小部件。

代码：

import 'package:corona_app/commons/moreInfo.dart';
import 'package:flutter/material.dart';

class HomeScreenMain extends StatefulWidget {

  @override
  _HomeScreenMainState createState() => _HomeScreenMainState();
}

class _HomeScreenMainState extends State<HomeScreenMain>
    with TickerProviderStateMixin {
  Animation sizeAnimation;
  AnimationController sizeAnimationController;
  bool reversed = false;
  @override
  void initState() {
    super.initState();
    sizeAnimationController = AnimationController(
        vsync: this, duration: Duration(milliseconds: 1000));
    sizeAnimation =
        Tween<double>(begin: 200, end: 170).animate(sizeAnimationController);
    sizeAnimationController.addListener(() {
      setState(() {});
    });
    sizeAnimationController.forward();
    sizeAnimation.addStatusListener((status) {
      if (status == AnimationStatus.completed && reversed == false) {
        sizeAnimationController.repeat(reverse: true);
      }
    });
  }

  @override
  void dispose() {
    sizeAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: defaultValues.backGroundColor,
      appBar: AppBar(
        title: Text('My App'),
        centerTitle: true,
        automaticallyImplyLeading: false,
        backgroundColor: defaultValues.appBarBackgroundColor,
      ),
      body: Stack(overflow: Overflow.visible, children: <Widget>[
        Positioned(
          top: 100,
          left: 100,
          child: Align(
            alignment: Alignment.topCenter,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Container(
                    child: Center(
                        child: Text(
                      'Suche Läuft',
                      style: TextStyle(color: Colors.white),
                    )),
                    width: this.sizeAnimation.value,
                    height: this.sizeAnimation.value,
                    decoration: new BoxDecoration(
                        shape: BoxShape.circle,
                        boxShadow: [
                          BoxShadow(blurRadius: 10, color: Colors.grey[600])
                        ],
                        gradient: RadialGradient(colors: [
                          Colors.grey[700],
                          Colors.grey[800],
                        ]))),
              ],
            ),
          ),
        ),
        Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.fromLTRB(0, 60, 0, 0),
              child: MoreInfo(),
            ),
          ],
        )
      ]),
    );
  }
}

Answer 1

让它按预期工作。

添加了bottom和right属性，并将对齐属性设置为Alignment.center。

这成功了。

希望对其他人有所帮助。

使用堆栈小部件在中心锚定动画小部件

Anchor animating widget in center using stack widget

animation

positioning

flutter