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

使其按预期工作。

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

这成功了。

希望它可以帮助其他人。

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

1 个答案: