После того, как компания использовала флаттер для разработки приложения, я тоже старый пользователь. Полгода практиковался. Недавно компания провела рефакторинг, и для управления маршрутизацией используется fluro. Давайте вместе проведем простой опыт.
1. Увеличьте файл page_router.dart
Напишите следующий код в этом файле
Класс PageRouter, в котором мы определяем статический экземпляр Router, предоставленный fluro. Затем определите статический метод setupRoutes для настройки наших маршрутов.
2. Увеличить page_routes.dart
Здесь я определяю коллекцию карт, ключ — это путь к странице, а значение — экземпляр Handler в соответствии с требованиями fluro.
Обратите внимание, что наша домашняя страница должна передавать параметр userId, поэтому я передам его здесь заранее.
Прежде всего, когда я определяю путь, я должен обратить внимание, что /home — это путь к странице, :userId эквивалентен параметру URL-адреса страницы, это заполнитель, мы должны передать его при переходе некоторое время
Например:router.navigateTo(context, "/home/1234", transition: TransitionType.fadeIn);Кроме того, параметр params представляет собой карту, а ключ — это имя параметра заполнителя, определенного слева. Однако params["userId"] — это список, и переданное значение не извлекается напрямую. вполне понимаю, почему здесь список. Выйдите и дайте мне значение напрямую, не так ли? И это значение на самом деле является первым в списке, поэтому мы используем .first, чтобы удалить его.
3. Зарегистрируйте маршруты
Мы определили маршруты выше, но они еще не были связаны с fluro, теперь мы их свяжем
Вернитесь к файлу page_router.dart Добавляем код в метод setupRoutes, сначала импортируем файл page_routes.dart
В setupRoutes мы просматриваем карту и вызываем router.define() для регистрации маршрута в Fluro Router. Здесь мы сделали большую часть работы Чтобы подчеркнуть, что до того, как я использовал fluro, я также искал связанные статьи и обнаружил, что они регистрируются вручную при регистрации маршрутов, что похоже на этот код.
router.define(xx, handler: xxHandler);
router.define(xx, handler: xxHandler);
Как программист, не делайте это вручную, не так ли? Достаточно сделать такой повторяющийся код напрямую. Может быть, кто-то другой просто напишет его для демонстрации.
4. Установите маршрутизатор в MaterialApp
- Сначала выполните следующий код в методе входа main() файла main.dart.
PageRouter.setupRoutes();
Это вызов метода setupRoutes вышеуказанного PageRouter для выполнения зарегистрированных маршрутов.
- Привязать к MaterialApp
MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
onGenerateRoute: PageRouter.router.generator,
)
5. Улучшение
Давайте рассмотрим метод записи при добавлении маршрутов на шаге 2. Я не думаю, что это выглядит достаточно элегантно.
- Все имена маршрутов названы в честь строк, которые легко конфликтуют и приводят к перезаписи.Когда имеется много имен страниц, путь к странице, добавленный позже, может быть таким же, как указано выше, и заполнитель для параметров, переданных наша страница выглядит странно, да, там много длинных путей с двумя-тремя параметрами.
- Передача параметров на странице очень многословна. Я думаю, что дизайн params очень плохой. Это карта. Когда мы получаем значение, тип теряется. Мы не знаем, какой тип мы получаем с первого взгляда. Но я Невооруженным глазом напрямую не видно, какой это тип, особенно когда пикапер пришел менять код, он растерялся. Тип теряется, потому что внутренняя запись fluro мертва, и все значения, вынутые из params, являются значениями String, но понятно, что общие параметры url также являются строковыми типами, но, например, когда я передал id к ClassDetailPage выше, потому что я определил, что он имеет тип int, и то, что я получаю через params["id"][0], является String, мне нужно выполнить преобразование типа,
- Эта строка кода в целом выглядит избыточной и громоздкой для написания.
Слишком много ерунды, давайте оптимизируем В первую очередь решить проблему прохождения значений между страницами.Передача значений с fluro нужно прописывать заранее там где определены маршруты.Я думаю это не принято.Моя привычка,что когда я перескакиваю на страницы,я будет объединять массивы и передавать значения. , теперь мне нужно не только присваивать значения при определении маршрутов, но и объединять данные для передачи значений при переходе по страницам, В настоящее время, если вы программист Android, подумаете ли вы о вещи под названием Bundle, которая используется при передаче значений между действиями? Да, мы получим это здесь
Мы используем это для нескольких преимуществ
- С первого взгляда вы можете четко знать, какую ценность вы хотите получить от карты, и какую ценность вы вкладываете.
- Мы упаковываем и передаем данные для передачи между страницами через объект Bundle, что не позволяет нам брать параметры один за другим из params при использовании fluro.
- Если ключ, который вы используете, случайно написан неправильно, я выдам запрос об исключении, вам не нужно ждать, пока вы его используете, чтобы узнать, что он нулевой,
Увидеть эффект от использования
Таким образом, сборщик никогда не будет жаловаться, что не знает, какой тип вы написали, я выше написал не тот тип, и ide тоже может его подсказать.
Затем мы преобразуем fluro для передачи параметров на страницу. добавить класс
Класс под названием PageBuilder, getHandler, наконец, возвращает обработчик, требуемый fluro,
Преобразуем файл page_routes.dart
Посмотрите, стало ли это намного круче, чем раньше,
- Ключ карты больше не является строкой. Мы определяем перечисление, PageName. Мы знаем, что значение перечисления не может быть повторено. Когда вы пишете повторение, IDE подскажет его напрямую, что гарантирует, что мы не будем появляться как струна, повторять так
- Давайте посмотрим на ценность карты, она очень освежает?
Глядя на это сейчас, я чувствую, что это кусок дерьма~~~
После оптимизации нам нужно только добавлять имя страницы в перечисление PageName каждый раз, когда мы добавляем страницу, а затем добавлять ключ и значение на карту просто напиши
PageBuilder(builder: (bundle) => LoginPage())
Пакет здесь — это пакет, в котором вы передаете значение между страницами.Вы должны поместить значение для передачи в объект пакета, а затем вручную передать его в параметры страницы, например этоPageBuilder(builder: (bundle) => HomePage(bundle))Внутри домашней страницы я объявляю окончательный пакет Bundle;
Давайте посмотрим, как мы передаем значение
Здесь мы собираемся использовать навигатор, который идет с флаттером.Второй параметр Navigator.pushNamed имеет тип String, поэтому давайте выполним toString для значения этого перечисления.Вы можете видеть, что мы берем его непосредственно из PageName.Имя страницу, вместо того, чтобы вводить строку самостоятельно, как раньше, легко ошибиться, Снова взглянув на аргументы, этот параметр помещает наш объект пакета и через этот параметр передает пакет на следующую страницу.
наконец
Я хотел бы поблагодарить авторов fluro за их вклад.Если у вас есть какие-либо идеи, пожалуйста, оставьте комментарий.Я желаю вам счастливого Праздника середины осени!