dart 抖动启用自定义过渡淡入淡出上的向后轻扫动画

s3fp2yjn 于 2023-02-20 发布在其他

关注(0)|答案(1)|浏览(121)

bounty将在5天后过期。回答此问题可获得+100声望奖励。Chris希望引起更多人关注此问题。

我有一个CustomPageRoute，用于pushing到另一个屏幕时的 * 淡入淡出 * 动画。这是预期的工作。
不过，我很想有一个向后滑动动画，但不能使它工作。我尝试了几个不同的东西，最有希望的是这个answer，但它仍然滑入/滑出页面。
对于动画，我只想要一个fadeAnimation，无论是推和弹出。
这是我的FadeTransition代码：

class FadePageTransition extends Page {
  final Widget page;

  const FadePageTransition({
    required this.page,
    LocalKey? key,
    String? restorationId,
  }) : super(
          key: key,
          restorationId: restorationId,
        );

  @override
  Route createRoute(BuildContext context) {
    return FadeRoute(
      child: page,
      routeSettings: this,
    );
  }
}

class FadeRoute<T> extends PageRoute<T> {
  final Widget child;
  final RouteSettings routeSettings;

  FadeRoute({
    required this.child,
    required this.routeSettings,
  });

  @override
  RouteSettings get settings => routeSettings;

  @override
  Color? get barrierColor => Palette.black;

  @override
  String? get barrierLabel => null;

  @override
  Widget buildPage(
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
  ) {
    return FadeTransition(
      opacity: animation,
      child: child,
    );
  }

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => const Duration(
        milliseconds: transitionDurationInMS,
      );
}

如果你需要更多信息就告诉我。

dart

来源：https://stackoverflow.com/questions/75412087/flutter-enable-swipe-back-on-custom-transition-fadeanimation

1条答案

按热度按时间

zynd9foi1#

这是我的淡入和幻灯片过渡的方法，如果你能从上下文中弄清楚，如果你是添加或删除的路线，你把条件，这应该工作。

Future nextScreenSlideIn(BuildContext context, page) {
  PageRouteBuilder builder = PageRouteBuilder(
      pageBuilder: (_, Animation animation, Animation secondaryAnimation) {
        return page;
      },
      transitionsBuilder: (
        _,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
      ) {
        return SlideTransition(
          position: Tween<Offset>(
            begin: const Offset(1, 0),
            end: Offset.zero,
          ).animate(animation),
          child: child,
        );
      },
      transitionDuration: const Duration(milliseconds: 200));

  return Navigator.push(context, builder);
}

Future nextScreenFadeIn(BuildContext context, page) {
  PageRouteBuilder builder = PageRouteBuilder(
      pageBuilder:
          (_, Animation<double> animation, Animation secondaryAnimation) {
        return page;
      },
      transitionsBuilder: (
        _,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
      ) {
        return FadeTransition(
          opacity: Tween<double>(begin: 0, end: 1).animate(animation),
          child: child,
        );
      },
      transitionDuration: const Duration(milliseconds: 200));

  return Navigator.push(context, builder);
}

或
您可以尝试以下软件包：https://pub.dev/packages/page_transition#do-you-want-use-theme-transitions-
它也提到类似的事情。

赞(0）回复(0）举报 2023-02-20

我来回答

dart 抖动启用自定义过渡淡入淡出上的向后轻扫动画

1条答案

相关问题

热门标签

最新问答