使用 AnimatedSwitcher 和 Dismissible 实现页面滑动行为

Question

我正在努力实现 $ 主题。当我向左侧滑动（移动为右 -> 左）时，动画会正确发生，并且小部件从右侧开始并保持不变。但是，当我向右滑动时，小部件转换正在发生，但小部件开始从右侧而不是左侧出现。

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

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

Answer 1

您可能已经知道了，但是，transitionbuilder 中的动画值将始终从 0 运行到 1，因此您始终会获得相同的过渡。您必须设置向左或向右滑动的条件。