flutter - 如何在层次结构中紧随其后的小部件之上为颤振小部件设置动画?
问题描述
我有一个简单的屏幕,其中一个小部件内有两个小Column
部件。当我点击顶部小部件时,我希望它向下移动到第二个小部件。该部分正在工作,但是当它向下滑动时,它会在底部小部件的后面而不是在底部小部件的前面。我假设这是因为底部小部件是在我的代码中创建的第二个。有没有办法将顶部小部件放在前面?这是我的代码:
AnimationController _controller;
Animation<Offset> _offsetAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(seconds: 2),
vsync: this,
);
_offsetAnimation = Tween<Offset>(
begin: Offset.zero,
end: const Offset(0.0, 1.0),
).animate(CurvedAnimation(
parent: _controller,
curve: Curves.easeInOut,
));
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();
return Scaffold(
backgroundColor: Colors.grey,
body: Center(
child: Column(
children: <Widget>[
SizedBox(height: 30),
Expanded(
flex: 1,
child: SlideTransition(
key: cardKey,
position: _offsetAnimation,
child: GestureDetector(
onTap: () {
_controller.addStatusListener((status) {
if (status == AnimationStatus.completed) {
_controller.reset();
}
});
_controller.forward();
},
child: EmptyPile(
title: "First Card",
),
),
),
),
Expanded(flex: 1,
child: EmptyPile(
title: "Second Card",
),
),
]
),
),
);
}
为了完整起见,但我认为这并不重要,这是我的EmptyPile
代码:
class EmptyPile extends StatelessWidget {
EmptyPile({Key key, this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 0.7,
margin: EdgeInsets.fromLTRB(0, 30, 0, 30),
decoration: borderDecoration(),
child: Center(
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 30.0),
),
),
);
}
}
最后是我的边框装饰:
BoxDecoration borderDecoration() {
return BoxDecoration(
border: Border.all(
width: 5,
),
borderRadius: BorderRadius.all(
Radius.circular(10)
),
color: Colors.white
);
}
解决方案
好吧,尽管它很简单,但我首先将它们包装在一个Stack()
. 在这种情况下,您可以访问图层,并且可以使用您的序列定义哪个小部件在前面,哪个不在前面。
I'm assuming this is because the bottom widget is created second in my code.
您应该对上述方法有一个有效的解决方法。
希望能帮助到你!
推荐阅读
- curl - applescript 中的 curl -s 命令今天停止
- datetime - 在 TimeOfDay 类中查找时间之间的差异,例如 (10:50 - 08:00 = 02:50)
- r - 在R中绘制,多行,按变量分组
- ruby - 拆分客户端 gem 的拆分 io 存根请求问题
- robotframework - 如何摆脱机器人固件 Python 中的错误“不存在的设置‘套件设置’”
- html - 如何切换多个浮动右元素的顺序?
- matlab - 如何在 Simulink 中实现时间相关的指数函数
- php - php cron timeout - 在后台运行脚本
- php - 使用 PHP 在 MySql 中上传图片
- jquery - 如果 div 有类删除类或者添加一个新类