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

Question

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

其中一个小部件应该设置动画，而其他小部件则不能。我当前正在尝试使用堆栈小部件来执行此操作，但是动画将在动画小部件锚定到我定义位置参数的任何位置的情况下运行。如果我定义top：100，left：100，则动画小部件在此时使用锚点进行动画设置，而不是像常规列和行设置那样在其中心进行动画处理。

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

我尝试过的事情：1.使用具有正常左上参数的堆栈小部件2.将堆栈小部件与positioned.fill和align，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

使其按预期工作。

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

这成功了。

希望它可以帮助其他人。