标签: page-transition

我完全被它困住了。我想创建一个自定义页面路由，该路由将为 IN 和 OUT 页​​面设置动画。路线本身的动画是一项简单的任务，我这样做：

    import 'package:flutter/material.dart';

    class FromMenuRoute extends PageRouteBuilder {

      final Widget nextPage;
      final Widget prevPage;

      FromMenuRoute({this.prevPage, this.nextPage}) : super(
        transitionDuration: Duration(milliseconds: 500),
        pageBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
        ) {
          return nextPage;
        },
        maintainState: false,
        transitionsBuilder: (
          BuildContext context,
          Animation<double> animation,
          Animation<double> secondaryAnimation,
          Widget child,
        ) {
          var colorTheme = CustomThemeData.of(context).colorTheme;
          return Material(
            child: Stack(
              overflow: Overflow.visible,
              children: <Widget>[
                SlideTransition(
                  position: Tween<Offset>(
                    begin: const Offset(0.0, 0.0),
                    end: const Offset(-0.3, 0.0),
                  ).animate(animation),
                  child: prevPage,
                ),
                SlideTransition( …

我了解到，使用react-router-dom v5，可以使用该<Prompt>组件在页面转换发生之前询问用户，以便用户可以阻止它。

现在，他们暂时从 v6 中删除了它（计划“稍后”有一个强大的实现）。相反，他们建议您自己实现一个等效的组件……我现在就想这样做。

但是：我发现没有办法真正阻止react-router-dom v6中的页面转换。有人知道吗？

我想在颤振中的两个页面的背景颜色之间设置动画。我说的是页面过渡，但我不想过渡整个页面，我只想更改新页面的背景颜色（从上一页的背景颜色到新颜色），而其余的前景内容淡入（或任何其他类型的过渡）。

如果您想要更多说明，我想要类似过渡的东西Hero，但带有页面的背景颜色。

背景颜色不必只是某个容器的颜色属性。

编辑：为了轻松回答，假设我的页面可以通过为其构造函数指定颜色来调用。所以页面如下所示，

class MyWidget extends StatelessWidget {
  final Color bgColor;

  const MyWidget(this.bgColor);

  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        Container(color: bgColor),
        // foreground widgets...
      ],
    );
  }
}

我的方法应该是什么？我应该创建类似自定义过渡的内容吗？在这种情况下，我该如何设置背景颜色的动画？