Flutter Navigator 2.0 Маршрутизация через навигатор ()
В настоящее время я пытаюсь создать веб-приложение с новой веб-бета-версией Flutter. Дело в том, чтобы иметь возможность иметь историю, обрабатывать кнопки вперед и назад в браузере и иметь возможность обрабатывать вводимые пользователем данные в URL-адрес, необходимый для нового API Navigator 2.0 (по крайней мере, из того, что я понял).
В настоящее время доступно лишь несколько ресурсов, на основе которых я пытаюсь создать свой навигатор. Ресурсы, которые я использовал:
- (Мой основной источник)"Изучение новой системы навигации и маршрутизации Flutter" от Джона Райана
- Аналогичный проект (по orestesgaolin), но с менеджером страницы и более сложным
- Публично поделился документ, трепетание о новом навигаторе
Мне удалось получить кнопку Назад и вперед, а также историю. Однако я изо всех сил пытаюсь обрабатывать переключатели страниц (в навигаторе ()). В примере от Джона он управляет различными сайтами в массиве page: виджета Navigator (в routeDelegater). Мне это показалось странным, но я попробовал вот так, и на самом деле это не сработало (Код ниже).
На странице 'page: []' я сначала попытался иметь логические значения, которые запускают (например, show404), но это было не очень чисто, поэтому следующей моей попыткой было получить текущую страницу следующим образом (в массиве):
if(_currentPage.name == 'pages[0]') pageBuilds[0]
Это вроде сработало, поскольку затем я смог ввести сегмент /matchit/0 и загрузить правильную страницу, однако по какой-то причине маршрут '/' больше не работал, и я получил ошибку
Navigator.onGenerateRoute was null, but the route named "/" was referenced
Затем я попытался использовать ongenerateRoute, но это вызвало кучу ошибок. Я новичок, так что, возможно, я сделал что-то не так. Но мне показалось, что это неправильный подход. И вот где я сейчас застрял. Я не знаю, что попробовать дальше, и надеюсь, что некоторые из вас, ребята, смогут мне помочь.
Мой Route-Delegater выглядит следующим образом (я также включу свои комментарии в код, может быть, это поможет некоторым из вас, кто также хочет понять Navigator 2.0, понять, что происходит):
/**
* The RouteDelegate defines application specific behavious of how the router
* learns about changes in the application state and how it responds to them.
* It listens to the RouteInformation Parser and the app state and builds the Navigator with
* the current list of pages (immutable object used to set navigator's history stack).
*/
//ChangeNotifier for the listeners as they are handled there
//The popRoute is handled by 'PopNavigatorRouterDelegateMixin'
class RoutesDelegater extends RouterDelegate<RoutePath>
with ChangeNotifier, PopNavigatorRouterDelegateMixin<RoutePath> {
//This is the state of the navigator widget (in build method)
GlobalKey<NavigatorState> get navigatorKey => GlobalKey<NavigatorState>();
//RoutesDelegater() : navigatorKey = GlobalKey<NavigatorState>();
MyPage _currentPage;
bool show404 = false; //checks if we show the 404 page
List<MyPage> pages = [
MyPage('ProjektListe'),
MyPage('StudiListe'),
MyPage('PRView'),
];
List<Page> pageBuilds = [
MaterialPage(key: ValueKey('Unknown'), child: UnknownScreen()),
MaterialPage(key: ValueKey('Homepage'), child: MyFirstHomepage()),
MaterialPage(key: ValueKey('OtherScreen'), child: OtherScreen()),
];
//currentConfiguration detects changes in the route information
//It helps complete the browser history and (IMPORTANT) makes the browser back and forward buttons work
RoutePath get currentConfiguration {
if (show404) {
return RoutePath.unknown();
}
if (_currentPage == null) return RoutePath.home();
//if not 404 or homepage it is some other page
return RoutePath.details(pages.indexOf(_currentPage));
}
@override
Widget build(BuildContext context) {
return Navigator(
key: navigatorKey,
pages: //List.of(pageBuilds),
[
//pageBuilds[1],
if (show404)
pageBuilds[0]
else if (_currentPage != null)
pageBuilds[1]
],
onPopPage: (route, result) {
if (!route.didPop(result)) {
return false;
}
_currentPage = null;
show404 = false;
//we are using Changenotifier
notifyListeners();
return true;
});
}
void _handleTapped(MyPage page) {
_currentPage = page;
notifyListeners();
}
@override
Future<void> setNewRoutePath(RoutePath path) async {
//Handle the unknown path
if (path.isUnknown) {
show404 = true;
_currentPage = null;
return;
}
if (path.isDetailPage) {
//Check if Path id is valid
if (path.id.isNegative || path.id > pages.length - 1) {
show404 = true;
return;
}
_currentPage = pages[path.id];
} else {
//homepage will be shown
_currentPage = null;
}
show404 = false;
}
}
Мой RoutingInformationParser выглядит так:
/*
* The RouteInformationParser takes the RouteInformation from RouteInformationProvider and
* parses it into a user-defined data type.
*/
class MyRoutesInformationParser extends RouteInformationParser<RoutePath> {
@override
Future<RoutePath> parseRouteInformation(
RouteInformation routeInformation) async {
//routeInformation is an object we get from the uri
final uri = Uri.parse(routeInformation.location);
// Handle '/' (Home Path)
//Path segments are the segments seperated by /, if we don't have any we are on Home
if (uri.pathSegments.length == 0) {
return RoutePath.home();
}
//We have 2, as we have matchit/...
if (uri.pathSegments.length == 2) {
//If there is no 'matchit' in the first path segment the path is unknown
if (uri.pathSegments.first != 'matchit') return RoutePath.unknown();
//If we now have the correct first segment we can now handle the rest of the segment
final remaining = uri.pathSegments.elementAt(1);
final id = int.tryParse(remaining);
//if it fails we return the unknown path
if (id == null) return RoutePath.unknown();
return RoutePath.details(id);
}
//Handling the unknown Path, e.g. user just typed anything in uri
return RoutePath.unknown();
}
//THIS IS IMPORTANT: Here we restore the web history
@override
RouteInformation restoreRouteInformation(RoutePath path) {
//Here we set the routeInformation which is used above, e.g. /404 for unknown page
if (path.isUnknown) {
return RouteInformation(location: '/404');
}
if (path.isHomePage) {
return RouteInformation(location: '/');
}
//Any other page is handled here via /matchit/... <= the id of the path
if (path.isDetailPage) {
return RouteInformation(location: '/matchit/${path.id}');
}
//If none of the paths are hit
return null;
}
}
Затем у нас также есть мой тип данных для информации о маршрутизации:
class RoutePath{
final int id;
final bool isUnknown;
RoutePath.home()
: id = null,
isUnknown = false;
//Details means here that it is any other side than Home or unknown
RoutePath.details(this.id) : isUnknown = false;
RoutePath.unknown()
: id = null,
isUnknown = true;
//check if is on HomePage or other page, then either == null or != null
//not needed for isInknown, as when unknown then = true as set above
bool get isHomePage => id == null;
bool get isDetailPage => id != null;
}
Наконец, моя домашняя страница (), где инициализируются InformationParser и Delegater:
class Homepage extends StatefulWidget {
@override
State<StatefulWidget> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
//initialize the RouteDelegater and Information Parser to be unsed further down
RoutesDelegater _routesDelegater = RoutesDelegater();
MyRoutesInformationParser _myRoutesInformationParser =
MyRoutesInformationParser();
/*
* Relevant routing information for this build method:
* We need to use the MaterialApp.router else we can't use routerDelegate and routeInformationParser.
* Then we define the delegate and Information Parser (they are initiated above)
*/
@override
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'MatchIT',
routerDelegate: _routesDelegater,
routeInformationParser: _myRoutesInformationParser,
theme: ThemeData(primarySwatch: Colors.blue),
debugShowCheckedModeBanner: false);
}
}
Заранее спасибо!
1 ответ
Мне действительно удалось решить эту проблему, добавив еще одну функцию, которая вызывается в моем Navigator() в RouteDelegator под страницами []:
@override
Widget build(BuildContext context) {
return Navigator(
key: navigatorKey,
pages: [
pageBuilds[1],
if (show404)
pageBuilds[0]
else if (_currentPage != null)
_getMyPage(_currentPage)
],
onPopPage: (route, result) {
if (!route.didPop(result)) {
return false;
}
_currentPage = null;
show404 = false;
//we are using Changenotifier
notifyListeners();
return true;
});
}
/*
* This is where every other site than homepage and 404 is handled
* to add another site to this application add the name to [List<MyPage> pages]
* and then add the MaterialPage here
*/
MaterialPage _getMyPage(MyPage currentPage) {
if (currentPage.name == 'Login')
return MaterialPage(key: ValueKey('LoginScreen'), child: OtherScreen());
else
return MaterialPage(
key: ValueKey('ProfileScreen'), child: ResultScreen());
}
Я также изменил имена в моих списках выше (просто чтобы вы, ребята, могли понять код):
List<MyPage> pages = [
MyPage('Login'),
MyPage('Profile'),
];
List<Page> pageBuilds = [
MaterialPage(key: ValueKey('Unknown'), child: UnknownScreen()),
MaterialPage(key: ValueKey('Homepage'), child: MyFirstHomepage()),
MaterialPage(key: ValueKey('LoginScreen'), child: OtherScreen()),
MaterialPage(key: ValueKey('ProfileScreen'), child: ResultScreen()),
];