flutter - 使用堆栈小部件在中心锚定动画小部件
问题描述
我试图在屏幕上放置多个小部件。
其中一个小部件应该具有动画效果,而其余小部件则没有。我目前正在尝试使用堆栈小部件来执行此操作,但动画运行时动画小部件锚定到我定义位置参数的任何位置。如果我定义 top: 100, left: 100 动画小部件在此时使用锚点进行动画处理,而不是像使用常规列和行设置那样在其中心进行动画处理。
如何使动画小部件锚定在中心?
我尝试过: 1. 使用具有正常左上角参数的堆栈小部件 2. 使用具有定位.填充和对齐、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(),
),
],
)
]),
);
}
}
解决方案
让它按预期工作。
添加底部和右侧属性,并将对齐属性设置为Alignment.center。
这成功了。
希望它可以帮助别人。
推荐阅读
- awk - 我可以删除awk中的字段吗?
- angular - 如何在 Angular 10 中使用 sprite.svg 处理散列资产
- parse-server - 使用 Parse-server 3.0.0+ 处理自定义响应消息
- angular - 带有 OCLIF 的网页中的终端窗口
- angular - 无法绑定到“formGroup”,因为当我通过模块重构应用程序时,它不是“form”的已知属性
- php - 十月 CMS:用户扩展模块抛出错误
- amazon-s3 - 未找到“League\Flysystem\AwsS3v3\AwsS3Adapter”类
- homebrew - brew 搜索显示时无法安装 go@1.13
- spring-boot - 将现有项目添加到已有文件的 github 存储库
- matlab - 曲线的旋转、曲线的交点和for循环的应用【浮点比较问题】】