如何在两个全宽小部件之间滑动转换

Question

我有一个有两个步骤的表单，我希望为在步骤1和2之间的水平滑动设置动画。

以下是我目前正在尝试的文档片段(老实说，我不确定自己是否理解(：

AnimatedSwitcher(
duration: Duration(milliseconds: 1000),
child: _formStep(context),
transitionBuilder:
(Widget child, Animation<double> animation) {
final position = Tween<Offset>(
begin: Offset(1.0, 0.0), end: Offset(0.0, 0.0))
.animate(animation);
return SlideTransition(
position: position,
child: child,
);
},
)

第1步到第2步的过渡将从右向左，第2步从右进入。不幸的是，似乎什么都没发生，所以我知道我肯定错过了什么。

有人能给我指正确的方向吗？它本质上与您在旋转木马上看到的过渡(水平过渡(相同。

Answer 1

请尝试以下代码。我使用AnimatedPosited，因为步骤(容器(在它们之间切换位置。我还假设步骤(容器(相互重叠。

import 'package:flutter/material.dart';
final Color darkBlue = const Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text("Flutter Demo"),
),
body: MyWidget(),
),
);
}
}
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
Size size;
double firstLeft, secondLeft;
final double top = 100;
@override
Widget build(BuildContext context) {
size = MediaQuery.of(context).size;
return Stack(
children: [
AnimtedSteps(
child: const Center(
child: Text(
"Step 1",
style: const TextStyle(fontSize: 30),
),
),
top: top,
left: firstLeft ?? 0,
backgroundColor: Colors.blueGrey,
),
AnimtedSteps(
child: const Center(
child: Text(
"Step 2",
style: const TextStyle(fontSize: 30),
),
),
top: top,
left: secondLeft ?? size.width,
backgroundColor: Colors.blueAccent,
),
Center(
child: RaisedButton(
onPressed: () {
setState(
() {
if (firstLeft == 0 || firstLeft == null) {
firstLeft = -size.width;
secondLeft = 0;
} else {
firstLeft = 0;
secondLeft = size.width;
}
},
);
},
child: const Text("slide"),
),
),
],
);
}
}
class AnimtedSteps extends StatelessWidget {
final double top;
final double left;
final Color backgroundColor;
final Widget child;
const AnimtedSteps(
{Key key, this.top, this.left, this.backgroundColor, this.child})
: super(key: key);
@override
Widget build(BuildContext context) {
return AnimatedPositioned(
duration: const Duration(milliseconds: 500),
left: left,
top: top,
child: Container(
width: MediaQuery.of(context).size.width,
height: 50,
color: backgroundColor,
child: child,
),
);
}
}