flutter - 使用 AnimatedSwitcher 和 Dismissible 的页面滑动行为
问题描述
我正在努力实现 $subject。当我向左侧滑动(移动是向右 -> 向左)时,动画会正确发生,并且小部件从右侧开始并停留。但是当我向右滑动时,小部件转换正在发生,但小部件开始从右侧而不是左侧出现。
我正在尝试像通常在日历中那样实现滑动移动。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MainPage(),
);
}
}
class MainPage extends StatefulWidget {
@override
_MainPageState createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
Widget child;
@override
void initState() {
super.initState();
child = Container(
child: Center(
child: Text(
'Main',
style: TextStyle(fontSize: 18.0),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
switchInCurve: Curves.easeIn,
switchOutCurve: Curves.easeOut,
transitionBuilder: (child, animation) {
return SlideTransition(
position: Tween<Offset>(begin: Offset(1.2, 0), end: Offset(0, 0))
.animate(animation),
child: child,
);
},
layoutBuilder: (currentChild, _) => currentChild,
child: Dismissible(
key: UniqueKey(),
resizeDuration: null,
onDismissed: _onHorizontalSwipe,
direction: DismissDirection.horizontal,
child: child,
),
),
);
}
void _onHorizontalSwipe(DismissDirection direction) {
if (direction == DismissDirection.startToEnd) {
setState(() {
child = Page1();
});
} else {
setState(() {
child = Page2();
});
}
}
}
class Page1 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
child: Center(
child: Text(
'Left side page',
style: TextStyle(fontSize: 18.0),
),
),
);
}
}
class Page2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
child: Center(
child: Text(
'Right side page',
style: TextStyle(fontSize: 18.0),
),
),
);
}
}
解决方案
您可能已经知道了,但是您在 transitionbuilder 中的动画值将始终从 0 运行到 1,因此您始终获得相同的转换。您必须设置向左或向右滑动的条件。
推荐阅读
- python - 定义 fileinput.input 文件对象的类型
- html - 如何将图像放置在具有不同图像大小的列中
- r - 是否可以在 R 中使用大于系统 RAM 的向量?
- wordpress - 带有 OR 条件的 WordPress WP QUERY
- r - R:绘制数据帧中对组合的百分比
- php - 无法获得对 .ajax() 的 cUrl 响应以进行重定向
- ui-automation - 将 pywinauto 脚本从 Windows 移植到 X11/Xlib
- openssl - Openssl:无法验证根 CA 证书颁发的客户端证书
- arrays - 串行读取循环不好
- linux - 如何从 shell 脚本中的文件中获取版本号?