Flutter 使用AnimatedSwitcher和Dismissible的页面滑动行为

我正在努力完成这个主题。当我向左滑动（移动为右->左）时，动画正确发生，小部件从右侧开始并停留。但当我向右滑动时，小部件转换正在发生，但小部件开始从右侧而不是左侧出现

我正在尝试实现像日历中通常做的那样的滑动移动

import'包装：flift/cupertino.dart'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主页：主页（），
);
}
}
类MainPage扩展了StatefulWidget{
@凌驾
_MainPageState createState（）=>\u MainPageState（）；
}
类_MainPageState扩展状态{
小部件儿童；
@凌驾
void initState（）{
super.initState（）；
子容器(
儿童：中心(
子：文本(
"主要",，
样式：TextStyle（fontSize:18.0），
),
),
);
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
身体：动画切换器(
持续时间：常数持续时间（毫秒：350），
switchinvire:Curves.easeIn，
切换曲线：Curves.easeOut，
transitionBuilder：（子对象，动画）{
返回幻灯片转换(
位置：二者之间（开始：偏移（1.2,0），结束：偏移（0,0））
.制作动画（动画），
孩子：孩子，
);
},
布局生成器：（currentChild，）=>currentChild，
孩子：可鄙(
键：UniqueKey（），
resizeDuration:null，
onDismissed:_onHorizontalSwipe，
方向：DismissDirection.horizontal，
孩子：孩子，
),
),
);
}
水平滑动无效（解除方向）{
如果（方向==解除方向.开始结束）{
设置状态（）{
child=Page1（）；
});
}否则{
设置状态（）{
child=Page2（）；
});
}
}
}
类Page1扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
颜色：颜色，黄色，
儿童：中心(
子：文本(
'左侧页面'，
样式：TextStyle（fontSize:18.0），
),
),
);
}
}
类Page2扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回容器(
颜色：Colors.blueAccent，
儿童：中心(
子：文本(
'右侧页面'，
样式：TextStyle（fontSize:18.0），
),
),
);
}
}

您可能已经得到了它，但是transitionbuilder中的动画值将始终从0运行到1，因此您总是得到相同的转换。你必须设置向左或向右滑动的条件

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),
        ),
      ),
    );
  }
}