Flutter 动画:如何保持父部件的位置
Flutter animations: how to keep position of parent widget
我在使用 Flutter 中的动画时遇到了一些问题。
有3个圆圈彼此相邻。当按下其中一个时,我希望它展开和折叠。动画有效,但当它发生时整行圆圈向下移动,以保持圆圈所在行的上边距。如何确保该行保持其原始位置?
我只将动画应用到中心圆来进行测试。如果代码混乱,我很抱歉,那是因为我正在测试它。这是动画和动画控制器:
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 200));
_animation = Tween(begin: 0.25, end: 0.35).animate(
CurvedAnimation(parent: _animationController, curve: Curves.elasticIn))
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
这些是圈子:
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
child: Center(
child: Text(
'Circles',
style: TextStyle(fontSize: 18),
),
),
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.primaryBlue)),
),
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return GestureDetector(
onTap: () {
_animationController.forward();
},
child: Container(
width: MediaQuery.of(context).size.width *
_animation.value,
height: MediaQuery.of(context).size.height *
_animation.value,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.primaryBlue)),
),
);
},
),
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.primaryBlue)),
)
],
),
),
您可能会注意到我对 Flutter 中的动画还很陌生,因此也非常欢迎其他反馈。谢谢!
首先我建议你删除 mainAxisSize: MainAxisSize.min,
如果那不起作用,尝试用容器包装动画构建器并赋予它与那些
相同的属性
输出:
完整代码:
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
child: Center(
child: Text(
'Circles',
style: TextStyle(fontSize: 18),
),
),
),
Container(
height: 200,
margin: EdgeInsets.only(top: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
),
Spacer(),
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return GestureDetector(
onTap: () {
_animationController.forward();
},
child: Container(
width: MediaQuery.of(context).size.width * _animation.value,
height: MediaQuery.of(context).size.height * _animation.value,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
),
);
},
),
Spacer(),
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
)
],
),
),
],
);
我在使用 Flutter 中的动画时遇到了一些问题。 有3个圆圈彼此相邻。当按下其中一个时,我希望它展开和折叠。动画有效,但当它发生时整行圆圈向下移动,以保持圆圈所在行的上边距。如何确保该行保持其原始位置?
我只将动画应用到中心圆来进行测试。如果代码混乱,我很抱歉,那是因为我正在测试它。这是动画和动画控制器:
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 200));
_animation = Tween(begin: 0.25, end: 0.35).animate(
CurvedAnimation(parent: _animationController, curve: Curves.elasticIn))
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_animationController.reverse();
}
});
这些是圈子:
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
child: Center(
child: Text(
'Circles',
style: TextStyle(fontSize: 18),
),
),
),
Container(
margin: EdgeInsets.only(top: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.primaryBlue)),
),
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return GestureDetector(
onTap: () {
_animationController.forward();
},
child: Container(
width: MediaQuery.of(context).size.width *
_animation.value,
height: MediaQuery.of(context).size.height *
_animation.value,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.primaryBlue)),
),
);
},
),
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: AppColors.primaryBlue)),
)
],
),
),
您可能会注意到我对 Flutter 中的动画还很陌生,因此也非常欢迎其他反馈。谢谢!
首先我建议你删除 mainAxisSize: MainAxisSize.min,
如果那不起作用,尝试用容器包装动画构建器并赋予它与那些
输出:
完整代码:
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
child: Center(
child: Text(
'Circles',
style: TextStyle(fontSize: 18),
),
),
),
Container(
height: 200,
margin: EdgeInsets.only(top: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
),
Spacer(),
AnimatedBuilder(
animation: _animation,
builder: (context, child) {
return GestureDetector(
onTap: () {
_animationController.forward();
},
child: Container(
width: MediaQuery.of(context).size.width * _animation.value,
height: MediaQuery.of(context).size.height * _animation.value,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
),
);
},
),
Spacer(),
Container(
width: MediaQuery.of(context).size.width * 0.25,
height: MediaQuery.of(context).size.height * 0.2,
margin: EdgeInsets.symmetric(horizontal: 8.0),
child: Center(child: Text('Circle')),
decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(color: AppColors.primaryBlue)),
)
],
),
),
],
);