Пример навигации по флаттеру | Сегодняшняя тема — «Перейти к новому экрану и вернуться». В терминах Android на наших экранах будут новые действия. С точки зрения iOS, у нас есть новые ViewControllers. Во Flutter экраны — это просто виджеты! Итак, как нам перейти на новые экраны? ответ — использование класса Navigator!
Навигация — ключевая часть UX для любого мобильного приложения. Из-за ограниченного экрана на мобильных устройствах пользователи всегда будут перемещаться между разными экранами, например, от списка к экрану подробностей, от корзины покупок к экрану оформления заказа, из меню в форму и во многих других случаях. Хорошая навигация помогает пользователям сориентироваться и получить представление о масштабах вашего приложения.
Навигация в iOS часто строится вокруг UINavigationController, который использует стековый подход для переключения между экраны. В Android стек действий является центральным средством навигации пользователя между различными экранами. Уникальные переходы между экранами в этих стеках могут помочь придать вашему приложению неповторимый вид.
Пример навигации по Flutter
Многостраничное приложение — это приложение, в котором мы создаем несколько экранов с их виджетами, один из которых отображается в любой момент времени. В большинстве случаев экраны отображаются на основе взаимодействия пользователя с приложением, что достигается с помощью функций навигации.
Класс Navigator
Это виджет, который управляет набором дочерних виджетов с дисциплиной стека. Мобильные приложения обычно раскрывают свое содержимое через полноэкранные элементы, называемые «экранами» или «страницами». Во Flutter эти элементы называются маршрутами, и ими управляет виджет навигатора. Навигатор возглавляет стек объектов маршрута и предоставляет методы для управления стеком, такие как Navigator.push и Navigator.pop.
Navigator.push
Он подталкивает данный маршрут к навигатору, который наиболее точно охватывает данный контекст. Синтаксис следующий.
Navigator.push (context, MaterialPageRoute (builder: (BuildContext context) => MyPage ( )));
Navigator.pop
Он выталкивает самый верхний маршрут из навигатора, который наиболее плотно охватывает данный контекст. Синтаксис следующий.
Navigator.pop (context);
Давайте рассмотрим простой пример, чтобы увидеть пример навигации Flutter в действии.
Шаг 1. Создайте проект Flutter.
Если вы не знаете, как создать новый проект Flutter, ознакомьтесь с моими инструкциями. Установите статью Flutter, мы можем создать новый проект из Visual Studio Code.
Теперь создайте одну папку внутри lib с именем pages и создайте в этой папке два экрана.
- HomeScreen.dart
- SecondScreen. dart
Шаг 2. Закодируйте файл SecondScreen.dart.
Напишите следующий код внутри SecondScreen.dart . Здесь я собираюсь объяснить обратный ход этой демонстрации. Итак, сначала мы кодируем файл SecondScreen.dart. Познакомьтесь со мной, и вы поймете ход этого проекта.
//SecondScreen.dartimport 'package: flutter/material.dart'; класс SecondScreen расширяет StatelessWidget {@override Widget build (BuildContext context ) {return Scaffold (appBar: AppBar (title: Text ('Второй экран'),), body: Center (child: RaisedButton (child: Text ('Back To HomeScreen'), color: Theme.of (context) .primaryColor) , textColor: Colors.white, onPressed: () => Navigator.pop (context)),),); }}
На этой странице мы взяли StatelessWidget, потому что нам не нужен StatefulWidget, потому что здесь нет данных для управления.
Это наш SecondScreen, и здесь, когда пользователь нажимает кнопку, мы вернемся на один шаг назад по экрану. Мы извлекаем маршрут из стека и возвращаемся к предыдущему маршруту.
В нашем случае это страница HomeScreen.dart, по которой мы будем перемещаться после нажатия кнопки Back To HomeScreen. Итак, давайте закодируем этот файл.
Шаг 3. Создайте код для файла HomeScreen.dart.
Напишите следующий код внутри Файл HomeScreen.dart.
//HomeScreen.dartimport 'package: flutter/material.dart'; import './SecondScreen.dart';class HomeScreen расширяет сборку StatelessWidget {@override Widget (контекст BuildContext ) {return Scaffold (appBar: AppBar (title: Text ('Home Screen'),), body: Center (child: RaisedButton (child: Text ('Go to Second Screen'), color: Theme.of (context). primaryColor, textColor: Colors.white, onPressed: () => Navigator.push (context, MaterialPageRoute (builder: (BuildContext context) => SecondScreen (),)))),); }}
Это наш домашний экран, и первый экран появляется, когда приложение скомпилировано.
Этот экран также является виджетом без сохранения состояния, потому что у нас нет состояния справляться. Теперь и здесь мы взяли виджет RaisedButton.
Когда пользователь нажимает эту кнопку, мы вызываем метод Navigator.push () и передаем параметры context и MaterialPageRoute.
Виджет MaterialPageRoute () также принимает один аргумент функции, называемый конструктором, и в этом аргументе нам нужно передать нашу целевую страницу, на которую нам нужно перейти. В нашем случае это второй экран, поэтому мы создали экземпляр SecondScreen, и мы также импортировали этот экран в верхней части файла.
Итак, когда пользователь нажимает на значок Кнопка перехода на второй экран , мы перейдем к SecondScreen, и когда пользователь нажмет кнопку SecondScreen, мы перейдем к этому экрану, который является HomeScreen.
Последним шагом является кодирование файла main.dart .
//main. dartimport 'package: flutter/material.dart'; import './pages/HomeScreen.dart';void main () => runApp (MyApp ()); класс MyApp расширяет StatelessWidget {@override Widget build (BuildContext context) {return MaterialApp (тема: ThemeData (primarySwatch: Colors.deepPurple), главная: HomeScreen ()); }}
Мы устанавливаем первый экран приложения в качестве домашнего экрана. Итак, мы импортируем файл HomeScreen.dart в файл main.dart и передаем этот экземпляр свойству home, и теперь мы можем видеть HomeScreen как первый экран приложения.
Откройте симуляторы iOS и Android и запустите компиляцию с помощью следующей команды.
flutter run -d all
Вы можете увидеть главный экран следующим образом.
Нажмите кнопку, и вы увидите второй экран, подобный этому.
Наконец, урок по использованию Flutter Navigation Example завершен. Спасибо, что приняли.
