Flutter 경로 플러그 인 fluro 사용
//www.jb51.net/article/215167.htm
//www.jb51.net/article/214856.htm
원생 의 길 을 사용 하면 기본적으로 대부분의 수 요 를 만족 시 킬 수 있 지만 페이지 에 브 라 우 저 url 과 같은 길 을 만 들 거나 페이지 가 이동 하 는 전환 애니메이션 을 제어 하려 면 원생 의 길 은 많은 개조 가 필요 하 다.pub 에 서 는 플러그 인 fluro 가 이러한 문 제 를 해결 하 는 우수한 경로 가 있 습 니 다.
fluro 의 사용 방법
fluro 의 사용 절 차 는 비교적 간단 하 며 다음 세 단계 로 나 뉜 다.
루트 프로세서 핸들 러
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
RouterManager.router.navigateTo(context, '${RouterManager.dynamicPath}/$id?event=a&event=b')
실행 효과우 리 는 플래시 페이지 를 첫 페이지 로 옮 기 고 자세 한 페이지 로 동적 으로 이동 하 며 로그 인 페이지 와 404 페이지 를 바 꾸 었 습 니 다.운행 효 과 는 다음 그림 과 같 습 니 다.전체 필드 전환 방식 이 다 르 기 때문에 정상 적 인 필드 전환 은 아래쪽 에서 상단 까지 팝 업 되 지만 404 는 왼쪽 에서 오른쪽으로 팝 업 됩 니 다(원생 push 와 같 습 니 다).이 후속 편 은 Handler 에서 조정 하거나 경로 가 이동 할 때 전환 애니메이션 을 정의 할 수 있 습 니 다.다음 편 에서 이 방면 의 사용 을 소개 하 겠 습 니 다.
이상 은 Flutter 경로 플러그 인 fluro 에서 사용 하 는 상세 한 내용 입 니 다.Flutter 경로 플러그 인 fluro 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Flutter】DateTime 전월의 일수를 취득한다달의 일수를 취득할 필요가 있어, 의외로 수요 있을까라고 생각했으므로 비망록 정도에 남겨 둡니다. DateTime 날짜에 0을 입력하면 전월 DateTime이 됩니다. 2021년 3월 0일 = 2021년 2월 28일...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.