从下到上导航页面

Question

我想导航到一个新页面（从页面 A 到页面 B），其中页面 B 将从下到上移动。

A页

 Navigator.pushNamed(context, InvoiceRoutes.createInvoiceScreen.dart);

发票路线

class InvoiceRoutes {
  
  static const createInvoiceScreen = "/createInvoiceScreen";
    
  static MaterialPageRoute<dynamic> _createInvoiceScreenRoute() {
    return MaterialPageRoute(builder: (context) {
      return BlocProvider(
          create: (_) => sl<OwnerInvoiceListCubit>(),
          child: BottomToTopPageRoute(page: PageB()));
    });
  }

  Route<dynamic>? getRoutes(RouteSettings settings) {
    if (settings.name == createInvoiceScreen) {
      return _createInvoiceScreenRoute();
    }

    return null;
  }
}

从底部到顶部页面路线

import 'package:flutter/material.dart';

class BottomToTopPageRoute<T> extends PageRouteBuilder<T> {
  final Widget page;

  BottomToTopPageRoute({required this.page})
      : super(
          pageBuilder: (context, animation, secondaryAnimation) => page,
          transitionsBuilder: (context, animation, secondaryAnimation, child) {
            const begin = Offset(0.0, 1.0);
            const end = Offset.zero;
            const curve = Curves.fastOutSlowIn;

            var tween =
                Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
            var offsetAnimation = animation.drive(tween);

            return SlideTransition(
              position: offsetAnimation,
              child: child,
            );
          },
        );
}

错误

参数类型“BottomToTopPageRoute”无法分配给 参数类型“Widget？”

Answer 1

出现错误是因为您使用 PageRouteBuilder 代替小部件。当您使用 PageRouteBuilder 时，不需要 MaterialPageRoute。

将您的函数

_createInvoiceScreenRoute()

替换为

static BottomToTopPageRoute<dynamic> _createInvoiceScreenRoute() {
return BottomToTopPageRoute(
    page: BlocProvider(
        create: (_) => sl<OwnerInvoiceListCubit>(), child: const PageB()));}

希望有帮助。