class _GSYTabBarState extends State<GSYTabBarWidget> with SingleTickerProviderStateMixin {
  // ... упущенные несущественные строки кода
  @override
  void initState() {
    super.initState();
    // При инициализации создаем контроллер
    // Используем with SingleTickerProviderStateMixin для создания анимационного эффекта.
    _tabController = new TabController(vsync: this, length: _tabItems.length);
  }

  @override
  void dispose() {
    /// При уничтожении страницы, уничтожаем контроллер
    _tabController.dispose();
    super.dispose();
  }
```    @override
    Widget build(BuildContext context) {
      /// Кнопка "Bottom TabBar" режима
      return new Scaffold(
          /// Установите боковое выдвижное меню drawer, если не требуется, можно не указывать
          drawer: _drawer,
          /// Установите плавающую кнопку действия, если не требуется, можно не указывать
          floatingActionButton: _floatingActionButton,
          /// Шапка
          appBar: new AppBar(
            backgroundColor: _backgroundColor,
            title: _title,
          ),
          /// Основной контент страницы, PageView, используется для отображения страниц, соответствующих каждому Tab
          body: new PageView(
            /// Обязательный контроллер, синхронизируется с контроллером tabBar
            controller: _pageController,
            /// Каждый Tab соответствует основному контенту страницы, это List<Widget>
            children: _tabViews,
            onPageChanged: (index) {
              /// Возврат при касании страницы, используемый для синхронизации состояния выбранного Tab
              _tabController.animateTo(index);
            },
          ),
          /// Нижняя навигационная панель, то есть TabBar
          bottomNavigationBar: new Material(
            color: _backgroundColor,
            /// Элемент управления TabBar
            child: new TabBar(
              /// Обязательный контроллер, синхронизируется с контроллером pageView
              controller: _tabController,
              /// Каждый TabItem, это List<Widget>
              tabs: _tabItems,
              /// Цвет нижней линии выбора Tab
              indicatorColor: _indicatorColor,
            ),
          ));
    }
  }Как показано в приведённом выше коде, это страница с режимом "Bottom TabBar". TabBar и PageView между собой синхронизируются через `_pageController` и `_tabController`, а эффект анимации Tab реализуется с помощью `SingleTickerProviderStateMixin`. Из кода видно:* При горизонтальном свайпе `PageView`, вызывается метод `_tabController.animateTo(index)` через `onPageChanged` для синхронизации состояния `TabBar`.

* В списке `_tabItems`, каждый клик по `TabBarItem` синхронизирует состояние `PageView` через `_pageController`. Вышеуказанный код все еще не содержит события нажатия кнопки `TabBarItem`, поскольку эта часть была реализована внешним образом. Конечно, можно также упаковать управление прямо внутри него и передать конфигурационные данные для прямого отображения, в зависимости от ваших потребностей.

Код внешнего вызова представлен ниже: при каждом нажатии на `Tabbar` происходит переход на конкретную страницу через `pageController.jumpTo`. Координаты, которые требуется пройти, равны: **текущий размер экрана, умноженный на номер индекса**.

```markdown
class _TabBarBottomPageWidgetState extends State<TabBarBottomPageWidget> {

  final PageController pageController = new PageController();
  final List<String> tab = ["Динамика", "Тренды", "Мои"];

  // Рender нижней части Tab
  _renderTab() {
    List<Widget> list = new List();
    for (int i = 0; i < tab.length; i++) {
      list.add(new FlatButton(onPressed: () {
        // При каждом нажатии на Tabbar происходит переход на конкретную страницу через jumpTo
        // Координаты, которые требуется пройти, равны: текущий размер экрана * номер индекса.
        topPageControl.jumpTo(MediaQuery.of(context).size.width * i);
      }, child: new Text(
        tab[i],
        maxLines: 1,
      )));
    }
    return list;
  }

  // Рender страниц, соответствующих Tab
  _renderPage() {
    return [
      new TabBarPageFirst(),
      new TabBarPageSecond(),
      new TabBarPageThree(),
    ];
  }

  @override
  Widget build(BuildContext context) {
    // Страница с `Tabbar` и `Scaffold`
    return new GSYTabBarWidget(
        type: GSYTabBarWidget.BOTTOM_TAB,
        // Рender табов
        tabItems: _renderTab(),
        // Рender страниц
        tabViews: _renderPage(),
        topPageControl: pageController,
        backgroundColor: Colors.black45,
        indicatorColor: Colors.white,
        title: new Text("GSYGithubFlutter"));
  }
}

В приложении с панелями навигации часто возникает необходимость управления дочерними страницами из родительского окна. Для этого используются глобальные ключи (`GlobalKey`). Например, `GlobalKey<PageOneState> stateOne = new GlobalKey<PageOneState>();`. Через объект `globalKey.currentState` можно вызвать открытые методы из `PageOneState`. Важно отметить, что экземпляр `GlobalKey` должен быть уникален во всем приложении.

### 2. Вертикальное и горизонтальное свайпы для обновления данных

*Необходимый компонент.*

В Flutter существует встроенный компонент `RefreshIndicator` для выполнения нижнего свайпа для обновления данных; одновременно мы можем использовать `ScrollController` для слушания событий свайпов и добавить один элемент в конец списка `ListView`, чтобы показать загрузку новых данных при вертикальном свайпе вниз. Как показано ниже в коде, можно легко реализовать возможность прокрутки для обновления с помощью компонента `RefreshIndicator`. Важно отметить, что **можно использовать `GlobalKey<RefreshIndicatorState>` для предоставления состояния `RefreshIndicatorState`, таким образом внешний код может вызвать метод `globalKey.currentState.show()` через `GlobalKey`, чтобы активировать состояние обновления и запустить `onRefresh`**.**Загрузка большего количества данных при прокрутке вниз** осуществляется методом `_getListCount()`, который увеличивает количество элементов, необходимых для отображения, на основе существующих данных, тем самым обеспечивая это для `ListView`. Наконец, **состояние прокрутки контролируется с помощью `ScrollController`, который слушает достижение нижней границы экрана и запускает `onLoadMore`**.Как показано ниже в коде, метод `_getListCount()` также позволяет настроить пустую страницу, заголовок и другие часто используемые эффекты. Это достигается путём изменения фактического количества элементов и рендера элементов внутри компонента.

```markdown
Класс `_GSYPullLoadWidgetState` расширяет состояние `GSYPullLoadWidget`.

```dart
class _GSYPullLoadWidgetState extends State<GSYPullLoadWidget> {
  // ...
  final ScrollController _scrollController = new ScrollController();

  @override
  void initState() {
    // Добавление прослушивания событий прокрутки
    _scrollController.addListener(() {
      // Определение, находится ли текущее положение прокрутки в конце списка
      if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent) {
        if (this.onLoadMore != null && this.control.needLoadMore) {
          this.onLoadMore();
        }
      }
    });
    super.initState();
  }

  // Возврат фактического количества элементов в списке согласно конфигурационному состоянию
  _getListCount() {
    // Определение необходимости наличия заголовка
    if (control.needHeader) {
      // Если требуется заголовок, используется первый элемент как заголовок ListView
      // Когда список содержит более одного элемента, общее количество элементов увеличивается на два
      return (control.dataList.length > 0) ? control.dataList.length + 2 : control.dataList.length + 1;
    } else {
      // Если заголовок не требуется, в случае отсутствия данных всегда возвращается одно значение для отображения пустой страницы
      if (control.dataList.length == 0) {
        return 1;
      }
    }
  }
}
``````markdown
### 3. Кнопка загрузки

В предыдущем разделе мы реализовали эффект прокрутки вниз для загрузки новых данных, что требует отображения состояния загрузки. По умолчанию система предоставляет компоненты `CircularProgressIndicator`, но нам с высокими требованиями этого может оказаться недостаточно. В этом месте рекомендуется использовать стороннюю библиотеку загрузки [flutter_spinkit](https://pub.flutter-io.cn/packages/flutter_spinkit), которая позволяет легко конфигурировать множество различных стилей загрузки.

Продолжим реализацию метода `_buildProgressIndicator`, используя библиотеку `flutter_spinkit` для создания уникального стиля загрузки.

```dart
/// Виджет для отображения прогресса загрузки
Widget _buildProgressIndicator() {
  /// Определяет, требуется ли отображение загрузки при прокрутке вниз
  Widget bottomWidget = control.needLoadMore
      ? Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            /// Контейнер с анимацией загрузки
            SpinKitRotatingCircle(color: Color(0xFF24292E)),
            SizedBox(width: 5.0),
            /// Текстовое сообщение о загрузке
            Text(
              'Загрузка...',
              style: TextStyle(
                  color: Color(0xFF121917),
                  fontSize: 14.0,
                  fontWeight: FontWeight.bold),
            ),
          ],
        )
      /// Если загрузка не требуется
      : Container();
}
```  return Padding(
    padding: const EdgeInsets.all(20.0),
    child: Center(child: bottomWidget),
  );
}

# pubspec.yaml
fonts:
  - family: wxcIconFont
    fonts:
      - asset: static/font/iconfont.ttf

// Пример использования иконок
Tab(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.list, size: 16.0),
      Text('Тренд'),
    ],
  ),
),

Tab(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(
        IconData(0xe6d0, fontFamily: 'wxcIconFont'),
        size: 16.0,
      ),
      Text('Моё'),
    ],
  ),
),

/// Переход без передачи параметров
Navigator.pushNamed(context, routeName);

/// Переход на новую страницу и замена текущей, например, переход с экрана входа на главный экран
Navigator.pushReplacementNamed(context, routeName);

/// Переход на новый маршрут и закрытие всех предыдущих страниц данного маршрута
Navigator.pushNamedAndRemoveUntil(context, '/calendar', ModalRoute.withName('/'));

/// Переход с передачей параметров и слушанием ответа
Navigator.push(context, new MaterialPageRoute(builder: (context) => new NotifyPage())).then((res) {
      /// Обработка полученного ответа
});

@optionalTypeArgs
static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
  return Navigator.of(context).push(route);
}

/// Создаем объект сетевого запроса, лучше всего сделать это глобальным одиночкой для dio
Dio dio = new Dio();
Response response;
try {
  /// Отправляем запрос
  /// URL адрес, данные запроса, обычно Map или FormData
  /// options дополнительные конфигурации, такие как настройка времени ожидания, заголовков, типа запроса, типа данных ответа, хоста и т.д.
  response = await dio.request(url, data: params, options: option);
} on DioError catch (e) {
  /// Ошибка HTTP возвращается через объект, переданный в catch для DioError
}

dependencies:
  # Ваши другие зависимости здесь
  json_annotation: ^0.2.2
``````markdown
dev_dependencies:
  # Ваши другие dev_dependencies здесь
  build_runner: ^0.7.6
  json_serializable: ^0.3.2

import 'package:json_annotation/json_annotation.dart';

/// Связь с файлом, позволяющая Template доступ к приватным методам в Template.g.dart
/// Template.g.dart - это файл, созданный командой. Его имя xx.g.dart, где xx - текущее имя dart файла
/// В Template.g.dart создаётся абстрактный класс _$TemplateSerializerMixin, который реализует _$TemplateFromJson метод
part 'Template.g.dart';

/// Отмечает класс как требующий реализации функциональности сериализации JSON
@JsonSerializable()

/// В файле 'xx.g.dart', по умолчанию, будет создан _$TemplateSerializerMixin, основываясь на имени класса Template
/// Поэтому имя текущего класса Template, и абстрактный класс будет _$TemplateSerializerMixin
class Template extends Object with _$TemplateSerializerMixin {

  String name;

  int id;

  /// Переопределяет имя параметра с помощью JsonKey
  @JsonKey(name: "push_id")
  int pushId;

  Template(this.name, this.id, this.pushId);

  /// В файле 'xx.g.dart', по умолчанию, будет создан _$TemplateFromJson, основываясь на имени класса Template
  factory Template.fromJson(Map<String, dynamic> json) => _$TemplateFromJson(json);
}
```![Сериализация части исходного кода](http://img.cdn.guoshuyu.cn/2 Yöntem-2/resim8)

Вышеупомянутые действия создали следующий код в файле `Template.g.dart`, который позволяет нам использовать методы `Template.fromJson` и `toJson` для преобразования между сущностью и картой. В сочетании с `json.decode` и `json.encode` вы можете легко осуществлять взаимообмен между **строками, картами и сущностями**.

```dart
part of 'Template.dart';

Template _$TemplateFromJson(Map<String, dynamic> json) => new Template(
    json['name'] as String, json['id'] as int, json['push_id'] as int);

abstract class _$TemplateSerializerMixin {
  String get name;
  int get id;
  int get pushId;
  Map<String, dynamic> toJson() =>
      <String, dynamic>{'name': name, 'id': id, 'push_id': pushId};
}

/// Глобальное хранилище Redux, содержащее данные состояния
class GSYState {
  /// Информация пользователя
  User userInfo;
  /// Конструктор
  GSYState({this.userInfo});
}

Далее приведена реализация `UserReducer`, которая связывает логику обработки редьюсеров с определёнными действиями через `TypedReducer`. В конце используется `combineReducers` для создания объекта типа `Reducer<State>`, который затем применяется к хранилищу.

Ниже показано, как использовать store в приложении Flutter, используя `StoreProvider`.

class DemoUseStorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// Используем StoreConnector для связи с User в GSYState
    return new StoreConnector<GSYState, User>(
      /// Преобразуем store.state.userInfo через конвертер
      converter: (store) => store.state.userInfo,
      /// Возвращаем контроллер для отображения имени пользователя
      builder: (context, userInfo) {
        return new Text(
          userInfo.name,
          style: Theme.of(context).textTheme.display1,
        );
      },
    );
  }
}

///
/// С помощью StoreProvider.of(context) (с контекстом внутри StoreProvider)
/// можно получить доступ к данным состояния в любом месте
StoreProvider.of(context).state.userInfo;
```///
/// С помощью `dispatch` метода `UpdateUserAction` можно обновить состояние
```dart
StoreProvider.of(context).dispatch(new UpdateUserAction(newUserInfo));

Неужели после всего этого хочется просто "побыть в одиночестве"? Независимо от того, кто такой "静静", полезность Redux должна привлекать больше внимания, чем любое желание побыть в одиночестве. Как программист с амбициями, что ещё нельзя завоевать? Для более подробной реализации см.: [GSYGithubAppFlutter](https://github.com/CarGuo/GSYGithubAppFlutter).

    UserDao.getUserInfo(userName, needDb: true).then((res) {
      /// Результат базы данных
      if (res != null && res.result) {
        setState(() {
          userInfo = res.data;
        });
      }
      return res.next;
    }).then((res) {
      /// Результат сети
      if (res != null && res.result) {
        setState(() {
          userInfo = res.data;
        });
      }
    });

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () {
        /// Если вернуть new Future.value(false), то событие pop не будет обработано
        /// Если вернуть new Future.value(true), то событие pop будет активировано
        /// Здесь можно использовать showDialog для отображения диалогового окна,
        /// а затем использовать Navigator.of(context).pop(true) для подтверждения выхода
        return _dialogExitApp(context);
      },
      child: new Container(),
    );
  }
}

/// Klasör WidgetsBindingObserver, uygulamanın yaşam döngüsünde değişiklikleri izlemek için bildirimler sunar
class _HomePageState extends State<HomePage> with WidgetsBindingObserver {

  /// `didChangeAppLifecycleState` metodunu WidgetsBindingObserver'dan devralıyoruz
  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    /// Uygulamanın durumu üzerinden belirleniyor
    if (state == AppLifecycleState.resumed) {

    }
  }

  @override
  Widget build(BuildContext context) {
    return new Container();
  }
}

/// Genellikle ekranı tıklatıldığında klavyeyi gizlemek gereklidir.
/// Aşağıdaki örnek, GestureDetector ve FocusScope'u bu amaçla kullanır.
class _MyWidgetState extends State<MyWidget> {
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: new Container(),
    );
  }
}
``````dart
// Пример использования GestureDetector и FocusScope для скрытия клавиатуры