Кратко

Эта статья подходит дляFlutterНовички, у которых уже есть простое понимание

Навигатор на официальном сайте

На официальном сайте написана длинная страница, что очень недружелюбно к новичкам. Уровень английского редактора может быть еще на уровне приятного знакомства. Я планирую опустить эту колонку... но я лучше, чем гугл-перевод (не совсем реклама)

Позвольте мне дать простое и грубое толкование (перевод), прежде чем говорить о Навигаторе, давайте кратко поговорим о нем.FlutterсерединаRouterКонцепция чего-либо

Router

Маршрутизация — это абстракция интерфейса экрана. Например, «/home» приведет вас на домашнюю страницу, а «/login» — на страницу входа. Проще говоря, каждому интерфейсу соответствует соответствующийPage. мы можем поставитьRouterДумайте об этом как о классе. Каждый ученик является лицом, зарегистрированным в этом классе. Учитель вызывает ученика, или учитель вызывает ученика, не называя имя или не хватая рукой. В некоторых демонстрационных приложениях Flutter мы объявляем несколько маршрутов

MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
        primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    routes: <String, WidgetBuilder> {
        '/xiaoming': (_) => new XiaoMingPage(),
        '/lili': (_) => new LiLiPage(),
    },
);

Управление маршрутизатором

Со студентами это будет включать в себя управление учениками, иначе у каждого ученика не будет правил, и весь класс будет очень хаотичным.Некоторые ученики хотят быть в первом ряду, некоторые ученики хотят сидеть в последнем ряду, весь классная комната станет кашей в кастрюле.В это время наш главный герой Навигатор может выйти на сцену.

Navigator

Navigator используется для управления функциями стека (например, push и pop).

Если у вас есть базовое представление о стеках, то вы знаете, что push и pop, push — это добавление элемента на вершину стека, а pop — это удаление верхнего элемента из того же стека.

Так что в случае с Flutter, когда мы переходим к другому экрану, мы используем метод Navigator.push, чтобы добавить новый экран в верхнюю часть стека. Конечно, эти всплывающие методы удаляют этот экран из стека. Здесь, давайте возьмем приведенное выше изображение в качестве примера, давайте посмотрим, как перейти с экрана 1 на экран 2.

Начальное состояние:

нажмитеСяомин выйтиВставьте интерфейс Xiaoming в стек

Нажмите верхнюю кнопку «Назад» или кнопку «Назад» Android, флаттер вызовет метод flutter.pop по умолчанию иИнтерфейс Сяоминвыскакивать

нажмитеЛили выйтиВойдите в интерфейс push Xiaoli и войдите в стек

Это весь процесс всей операции стека на рисунке выше.

Суммировать

На самом деле я не закончил

Написано здесь, вы можете подумать, что то, что сказал редактор, немного захватывает.

Я просмотрел много связанных статей, в основном говорящих оpushметодpushNameНа этом статья о методе закончена, но NB флаттера — это не то, что могут показать эти два метода.

статический метод

Ниже приведен статический метод официального сайта Navigator, а затем я объясню ключевые части.

maybePop

Если вы напрямую всплываете единственный интерфейс в стеке на домашней странице приложения (в стеке всего один элемент), поздравляю, вы можете идти на финансовый расчет завтра.Чтобы избежать этой проблемы, мы можем вызвать mayPop() метод. Этот метод — это метод, который вы можете попытаться отскочить, но вы не сможете его опустить.

Тест на эффект:

Это код кнопок последних нескольких кнопок в gif.

// 试试然后成功反回
RaisedButton(
    onPressed: () {
        Navigator.maybePop(context);
    },
    child: Text("栈中测试试maybePop"),
),
// 试试,发现自己是栈里唯一的元素, 放弃pop
RaisedButton(
    onPressed: () {
        Navigator.maybePop(context);
    },
    child: Text("栈首测试试maybePop"),
),
// 直接退, 然后挂了
RaisedButton(
    onPressed: () {
        Navigator.pop(context);
    },
    child: Text("直接pop()"),
),

canPop

Я поставил canPop после mayPop, потому что это очень просто (на самом деле мне лень делать демонстрационную диаграмму) canPop возвращает значение только тогда, когда в стеке есть только один элементfalse, все остальные верны.

может быть, поп можно понимать как

Navigator.canPop(context) ? Navigator.pop(context): null;

push и pushNamed

Эффект операции push такой же, как и у pushNames, но метод вызова интерфейса другой. Оба помещают интерфейс в стек. Разница в том, что push — это бросание интерфейса в стек вручную, а pushNames — передать интерфейс по имени.routerПусть интерфейс входит в стек сам.

// push的调用方法
Navigator.push(context,  new MaterialPageRoute(
    builder: (context)  {
      return Scaffold(
        appBar: AppBar(
          title: Text('我是新的界面'),
        )
      );
    }
));

// pushNamed的调用方法
// 先在Router上定义Page;
routes: <String, WidgetBuilder> {
    '/xiaoming': (_) => new XiaoMingPage(),
}
...
Navigator.pushNamed(context, '/XiaoMingPage');

pushReplacement и pushReplacementNamed

То же, что и выше, оба используются для замены верхнего элемента в текущем стеке. Просто интерфейс вызывается по-разному. Об этом много говорить не буду. Эффект зависит от демо. После нажатия кнопки на вторая мировая тестовая страница, переход к новому интерфейсу, нажмите еще раз, мы вернулись на домашнюю страницу

pushAndRemoveUntil и pushNamedAndRemoveUntil

Когда мы создаем очень сложное приложение, пользователь входит в систему, прокручивает, видит различную информацию... Пользователь хочет выйти из системы и вернуться на домашнюю страницу, вы не можете просто нажать кнопкутитульная страница, в таком случае вы должны удалить все маршруты в стеке, чтобы пользователь не мог вернуться к предыдущему интерфейсу после выхода из системы. Метод в официальной демо-версии, вернитесь к нижней части стека и поместите его в стек.MyHomePage.

// flutter sample
void _finishAccountCreation() {
  Navigator.pushAndRemoveUntil(
    context,
    MaterialPageRoute(builder: (BuildContext context) => MyHomePage()),
    ModalRoute.withName('/'),
  );
}

popUntil

Когда мы создаем сценарий создания нескольких форм, пользователю необходимоPageЗаполняя различные формы, когда пользователь заполняет третью страницу, пользователь решает отменить заполнение формы, логика, которую мы ожидаем, состоит в том, чтобы вернуться на определенную страницу перед заполнением формы.

Navigator.popUntil(context, ModalRoute.withName('/Dashboard'));

незавершенное для добавления

Автор тоже новичок.Если есть неточность прошу критиковать и критиковать, а так же автор улучшит эту статью с более глубоким пониманием.

Demo Code