Flutter: переход между экранами
Продолжаем работать с приложением из предыдущей статьи.
А что если логика работы приложения не ограничивается одним экраном? Создадим файл /lib/pages/about.dart
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import 'package:flutter/material.dart'; class AboutMe extends StatefulWidget { _AboutMeState createState() => _AboutMeState(); // сюда передаем текущее состояние страницы } class _AboutMeState extends State<AboutMe> {// _ впереди класса, означает чтоб скрыть доступ из другх файлов @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('О нас')) ); } } |
А в файл page1.dart добавим связку со страницей:
|
1 2 3 4 5 |
import 'package:invent/pages/about.dart'; И в меню строчку вызова новой страницы: |
|
1 2 3 4 5 6 7 8 |
ListTile( onTap: (){ Navigator.push(context, MaterialPageRoute(builder: (context) => AboutMe())); }, leading: Icon(Icons.account_balance_outlined,), title: Text('About'), tileColor: Color(0xFFF5F5F5), dense: false, ), |
В результате получим переход на другую страницу:
Можно заметить, что срелка «назад» добавилась автоматичеки. Программно это вызов:
|
1 |
Navigator.pop(context); |
Navigator – виджет-класс, позволяющий управлять стеком дочерних виджетов, т.е. открывать, закрывать и переключать окна или страницы. Когда мы используем MaterialApp, то экземпляр класса Navigator уже создан
Второй способ переключения между экранами
Существует второй штатный способ переключения между экранами. Особой разницы между ними нет, каждый использует по своему усмотрению. Flutter позволяет переключаться между экранами при помощи «маршрутов». Для этого в главном файле вместо вызова home: Page1() добавим маршруты:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import 'package:invent/pages/about.dart'; import 'pages/page1.dart'; ... Widget build(BuildContext context) { return MaterialApp( title: 'Инвентаризация ССК', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), initialRoute: '/', routes: { '/':(BuildContext context) => Page1(), '/AboutMe':(BuildContext context) => AboutMe() } ); } |
И соответственно тогда вызов перехода будет теперь осуществлять вот так:
|
1 2 3 4 5 6 7 8 9 |
ListTile( onTap: (){ Navigator.pushNamed(context, "/AboutMe"); }, leading: Icon(Icons.account_balance_outlined,), title: Text('About'), tileColor: Color(0xFFF5F5F5), dense: false, ), |