Учебное пособие по вкладкам Flutter | Пример работы с вкладками — это тема сегодняшнего дня. Работа с вкладками — это типичный шаблон в приложениях для Android и iOS, которые следуют рекомендациям по материальному дизайну.
Flutter включает очень удобный способ создания макетов вкладок. Чтобы вкладки работали, нам нужно синхронизировать выбранные вкладки и разделы содержимого. Это работа TabController . В нашем примере приложения есть экран, который содержит панель вкладок с двумя экранами.
Чтобы добавить вкладки в приложение, все, что мне нужно, это создать TabBar И TabBarView и прикрепите к ним TabController . TabController синхронизирует TabBar с TabBarView, чтобы мы могли иметь желаемое поведение.
Учебное пособие по Flutter Tabs с примером
Использование DefaultTabController — самый простой вариант, поскольку он создаст для нас TabController и сделает его доступным для всех дочерних виджетов. Синтаксис DefaultTabController следующий.
DefaultTabController (//Количество tabs/content, нам нужно отображать длину: 3, child://См. следующий шаг!);
Шаг 1. Установите приложение Flutter.
Если вы новичок в флаттере и не знаете, как установить флаттер на Mac, то ознакомьтесь с этой статьей.
После этого, если вы не знаете, как чтобы написать виджет во флаттере, перейдите по этой ссылке.
Шаг 2: Создайте два экрана.
Внутри папки lib создайте одну папку с именем screen и внутри нее создайте две файлы.
- FirstScreen.dart
- SecondScreen.dart
Напишите следующий код внутри
//FirstScreen.dartimport 'package: flutter/material.dart'; класс FirstScreen расширяет StatelessWidget {@overrid e Сборка виджета (контекст BuildContext) {return Container (child: Center (child: Text ('Tab 1 Layout'),),); }}
В приведенном выше коде мы только что добавили один центрированный текст.
Когда пользователь нажимает на первую кнопку вкладки, мы увидим этот экран.
Напишите следующий код внутри пакета
//SecondScreen.dartimport ': flutter/material.dart' ; класс SecondScreen расширяет StatelessWidget {@override Widget build (BuildContext context) {return Container (child: Center (child: Text ('Tab 2 Layout'),),); }}
Это второй макет вкладки. Итак, мы создали два макета вкладок для нашего приложения.
Теперь осталось создать DefaultTabController .
Шаг 3. Создайте DefaultTabController
Напишите следующий код внутри main.dart файл.
//main.dartimport 'package: flutter/material. dart '; import' ./pages/FirstScreen.dart';import './pages/SecondScreen.dart';void main () {runApp (MyApp ());} class MyApp расширяет StatelessWidget {@override Widget build (BuildContext context ) {return MaterialApp (главная: DefaultTabController (длина: 2, дочерний элемент: Scaffold (appBar: AppBar (внизу: TabBar) (вкладки: [Tab (icon: Icon (Icons.directions_car)), Tab (icon: Icon (Icons.directions_transit) )],), заголовок: Text ('Пример вкладок Flutter'),), body: TabBarView (children: [FirstScreen (), SecondScreen (),],),),),); }}
В приведенном выше коде мы импортировали два экрана, которые были созданы ранее в этой статье.
В нашем приложении всего две вкладки. Итак, мы присвоили длину двум.
Затем мы взяли TabBar и назначили два значка вкладки.
Теперь давайте определим TabBarView , который имеет два экрана. Поэтому, когда пользователь щелкает один из значков, он отображает связанные экраны.
Сохраните файл, перейдите в терминал и введите следующую команду. Убедитесь, что симуляторы iOS и Android открыты. Мы проверим вывод на обоих виртуальных устройствах.
flutter run -d all
См. Вывод ниже.
Выше приложение является основным примером вкладок Flutter, но вы понимаете, как мы можем создать макет на основе вкладок в приложении Flutter. Наконец, Учебное пособие по Flutter Tabs | Пример работы с вкладками окончен.
