我想从另一页面的右向左拖动页面。
@override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this,
duration: Duration(milliseconds: 1050),
);
_animationController.forward();
_animationController.reverse();
}
Container topicPage = Container(
color: Colors.blueAccent,
width: double.infinity,
);
Container conversationPage = Container(
color: Colors.redAccent,
width: double.infinity,
);
@override
Widget build(BuildContext context) {
return SafeArea(
child: GestureDetector(
onTap: () {
setState(
() {
_animationController.forward();
},
);
},
onDoubleTap: () {
setState(
() {
_animationController.reverse();
},
);
},
child: Stack(
children: [
topicPage,
AnimatedBuilder(
animation: _animationController,
builder: (context, _) {
double width = MediaQuery.of(context).size.width *
_animationController.value;
print("Value: " + _animationController.value.toString());
return Transform(
alignment: Alignment.centerLeft,
transform: Matrix4.identity()..translate(width),
child: conversationPage,
);
},
)
],
),
));
}
项目文件:GitHub Repo
准确地说,我想获得以下结果: https://www.youtube.com/watch?v=kRO5UrxfOZQ
这是新版松弛版的设计,最初的首页是频道列表,当我们从右向左滑动时,新的对话页会覆盖频道页/首页。 同样,当“对话页面”处于从右到左的过渡中时,即使主页中有一个很小的向左过渡。 我想达到类似的结果。 如何使用GestureDetector,Transformer和Animation实现它?