Flutter 경로 플러그 인 fluro 사용

앞의 두 편의 글 에서 우 리 는 Flutter 의 네 비게 이 션 Navigator 가 페이지 전환,경로 와 경로 차단 의 사용 을 실현 하 는 것 을 소 개 했 습 니 다.구체 적 으로 이전의 글 을 참고 할 수 있 습 니 다.
//www.jb51.net/article/215167.htm
//www.jb51.net/article/214856.htm
원생 의 길 을 사용 하면 기본적으로 대부분의 수 요 를 만족 시 킬 수 있 지만 페이지 에 브 라 우 저 url 과 같은 길 을 만 들 거나 페이지 가 이동 하 는 전환 애니메이션 을 제어 하려 면 원생 의 길 은 많은 개조 가 필요 하 다.pub 에 서 는 플러그 인 fluro 가 이러한 문 제 를 해결 하 는 우수한 경로 가 있 습 니 다.
fluro 의 사용 방법
fluro 의 사용 절 차 는 비교적 간단 하 며 다음 세 단계 로 나 뉜 다.
  • FluroRouter 경로 의 인 스 턴 스 를 구축 하고 하나의 인 스 턴 스 를 사용 하면 됩 니 다
  • 경로 에 맞 는 프로세서(Handler)를 정의 합 니 다.경로 에 맞 는 처리 방법 입 니 다
  • MaterialApp 에서 onGenerate Route 를 FluroRouter.generator 방법 으로 시스템 경 로 를 구축 합 니 다
  • 주의해 야 할 것 은 Fluro 는 기본적으로 경로'/'를 루트 디 렉 터 리 로 사용 하기 때문에 루트 디 렉 터 리 의 Handler 를 정의 해 야 합 니 다.또한 루트 가 존재 하지 않 는 경우 FluroRouter.notFoundHandler 정의 오류 루트 프로 세 서 를 설정 할 수 있 습 니 다.
    루트 프로세서 핸들 러
    fluro 의 관건 적 인 실현 은 Handler 이 고 Handler 의 정 의 는 다음 과 같다.
    
    class Handler {
      Handler({this.type = HandlerType.route, required this.handlerFunc});
      final HandlerType type;
      final HandlerFunc handlerFunc;
    }
    
    구조 함 수 는 두 가지 속성 이 있 는데 하 나 는 Handler Type 매 거 진 이 고 route 와 function 두 가지 값 으로 나 뉘 는데 그 중에서 경로 에 사용 되 는 것 은 route 이 며 기본 값 입 니 다.handler Func 는 필수 전송 입 니 다.이것 은 경로 에 응답 하 는 방법 입 니 다.해당 페이지 로 이동 할 수 있 도록 Widget 을 되 돌려 야 합 니 다.
    
    typedef Widget? HandlerFunc(
        BuildContext? context, Map<String, List<String>> parameters);
    
    Handler Func 는 상하 문 context 를 수신 하고 루트 파 라미 터 를 지 니 고 있 습 니 다.이 파 라미 터 는 루트 경로 에 대응 하 는 여러 루트 파라미터 입 니 다.예 를 들 어/dynamic/:id 루트,실제 루트 가/dynamic/1 이면?event=a&event=b,parameters 의 형식 은 다음 과 같 습 니 다.
    
    {
      "id": ["1"],
      "event": ["a", "b"]
    }
    
    경로 매개 변수의 데이터 형식 은 모두 String 형식 이 므 로 이 Handler 를 통 해 경로 매개 변 수 를 하위 페이지 로 전달 할 수 있 습 니 다.
    사용 예시
    우 리 는 경 로 를 통일 적 으로 관리 하기 위해 하나의 RouterManager 를 정의 합 니 다.그 안의 속성 은 모두 정적 구성원 으로 클래스 를 통 해 직접 접근 할 수 있 고 예 시 를 만 들 필요 가 없습니다.물론 포장 성 을 고려 해 단일 모델 로 도 만 들 수 있다.FluroRouter 는 한 번 만 초기 화 할 수 있 습 니 다.그렇지 않 으 면 열 과부하 오류 알림 경로 가 정의 되 었 습 니 다.우 리 는 이전 두 편의 경 로 를 플 루 로 점프 로 바 꾸 었 습 니 다.RouterManager 의 코드 는 다음 과 같 습 니 다.
    
    //   import
    
    class RouterManager {
      static String splashPath = '/';
      static String loginPath = '/login';
      static String homePath = '/home';
      static String dynamicPath = '/dynamic';
      static String dynamicDetailPath = '$dynamicPath/:id';
    
      static FluroRouter router;
    
      static void initRouter() {
        if (router == null) {
          router = FluroRouter();
          defineRoutes();
        }
      }
    
      static var loginHandler =
          Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return LoginPage();
      });
    
      static var dynamicDetailHandler =
          Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return DynamicDetailPage(params['id'][0]);
      });
    
      static var splashHandler =
          Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return Splash();
      });
    
      static var homeHandler =
          Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return AppHomePage();
      });
    
      static var notFoundHandler =
          Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
        return NotFound();
      });
    
      static void defineRoutes() {
        router.define(splashPath, handler: splashHandler);
        router.define(homePath, handler: homeHandler);
        router.define(loginPath, handler: loginHandler);
        router.define(dynamicDetailPath, handler: dynamicDetailHandler);
        router.notFoundHandler = notFoundHandler;
      }
    }
    
    
    실제 적 으로 Router Manager.initRouter 방법 만 호출 하면 경로 의 초기 화 를 완성 할 수 있 습 니 다.이것 은 main.dart 의 Material App 에서 이 루어 져 야 합 니 다.코드 는 다음 과 같 습 니 다.이전 코드 에 비해 navigationKey 파라미터 와 initialRoute 파 라 메 터 를 설정 할 필요 가 없습니다.build 방법 에서 루트 를 초기 화 하 는 방법 을 호출 해 야 합 니 다.
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        RouterManager.initRouter();
        return MaterialApp(
          //...
          onGenerateRoute:
              RouterManager.router.generator,
        );
      }
    }
    
    페이지 이동
    페이지 전환 호출 은 여러 가지 형식 이 있 습 니 다.본 사례 에서 우 리 는 세 가 지 를 사 용 했 습 니 다.각각:
    4.567917.스 택 에서 뛰 어 내 리 는 것 을 제거 합 니 다.즉,뛰 어 내 린 페이지 는 루트 페이지(되 돌아 오 는 버튼 이 없 음)로 서 화면 을 첫 페이지 로 뛰 어 내 리 는 데 적합 합 니 다.코드 는 다음 과 같 습 니 다.
    
    RouterManager.router.navigateTo(context, RouterManager.homePath, clearStack: true);
    
    4
  • 일반 점프:매개 변수 없 이 바로 점프 합 니 다.코드 는 다음 과 같 습 니 다
  • 
    RouterManager.router.navigateTo(context, RouterManager.loginPath);
    
    4
  • 매개 변수 전환:경로 에 매개 변 수 를 가지 고 일반 점프 와 유사 하 며 경로 파라미터 와 query 매개 변 수 를 연결 할 뿐 입 니 다
  • 
    RouterManager.router.navigateTo(context, '${RouterManager.dynamicPath}/$id?event=a&event=b')
    
    실행 효과
    우 리 는 플래시 페이지 를 첫 페이지 로 옮 기 고 자세 한 페이지 로 동적 으로 이동 하 며 로그 인 페이지 와 404 페이지 를 바 꾸 었 습 니 다.운행 효 과 는 다음 그림 과 같 습 니 다.전체 필드 전환 방식 이 다 르 기 때문에 정상 적 인 필드 전환 은 아래쪽 에서 상단 까지 팝 업 되 지만 404 는 왼쪽 에서 오른쪽으로 팝 업 됩 니 다(원생 push 와 같 습 니 다).이 후속 편 은 Handler 에서 조정 하거나 경로 가 이동 할 때 전환 애니메이션 을 정의 할 수 있 습 니 다.다음 편 에서 이 방면 의 사용 을 소개 하 겠 습 니 다.

    이상 은 Flutter 경로 플러그 인 fluro 에서 사용 하 는 상세 한 내용 입 니 다.Flutter 경로 플러그 인 fluro 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!

    좋은 웹페이지 즐겨찾기