🧩PageView()

Что такое PageView

PageView — это виджет в Flutter, который позволяет отображать несколько страниц, которые можно пролистывать горизонтально или вертикально. Подумайте о PageView, как о книге: вы можете переворачивать страницы, чтобы увидеть следующую или предыдущую. Это очень удобно, например, для создания слайдеров, каруселей или для отображения различных экранов приложения.

Пример использования

Вот простой пример того, как использовать PageView:

import 'package:flutter/material.dart';

class PageViewExample extends StatelessWidget {
  const PageViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('PageView Example')),
      body: PageView(
        children: <Widget>[
          Container(color: Colors.red),
          Container(color: Colors.green),
          Container(color: Colors.blue),
        ],
      ),
    );
  }
}

Как работает код

  1. PageView — это основной виджет, который содержит другие виджеты (страницы).

  2. children — это список страниц, которые будут отображаться. В примере мы используем контейнеры разных цветов.

  3. Когда вы запускаете приложение, вы можете прокручивать между красной, зеленой и синей страницами, как в книге.

Зачем это нужно

PageView полезен в следующих случаях:

  • Пролистывание страниц: Когда вы хотите, чтобы пользователь мог переходить между разными экранами, как в слайдерах.

  • Обеспечение упорядоченного просмотра: Помогает организовать контент в виде отдельных страниц, что делает его более удобным для восприятия.

  • Гибкость: Позволяет настраивать, как пользователь будет взаимодействовать с вашим контентом.

Все настройки PageView

  1. Key? key

    • Описание: Уникальный ключ для виджета, который помогает Flutter отслеживать изменения и обновления виджетов.

    • Пример:

      key: ValueKey('myPageView') // Уникальный ключ для PageView

  2. Axis scrollDirection = Axis.horizontal

    • Описание: Указывает направление прокрутки. По умолчанию это горизонтально, но можно сделать вертикальным.

    • Пример:

      scrollDirection: Axis.vertical // Прокрутка по вертикали

  3. bool reverse = false

    • Описание: Если true, страницы будут прокручиваться в обратном порядке (с конца к началу).

    • Пример:

      reverse: true // Прокрутка в обратном направлении

  4. PageController? controller

    • Описание: Позволяет управлять страницами программно, например, переходить на конкретную страницу.

    • Пример:

      controller: PageController(initialPage: 0) // Контроллер для управления страницами

  5. ScrollPhysics? physics

    • Описание: Определяет поведение прокрутки, например, пружинный эффект или замедление при прокрутке.

    • Пример:

      physics: BouncingScrollPhysics() // Прокрутка с эффектом пружины

  6. bool pageSnapping = true

    • Описание: Если true, страницы будут автоматически "прилипать" к границам при прокрутке. Это удобно для четкого перехода между страницами.

    • Пример:

      pageSnapping: false // Отключает прилипание страниц

  7. void Function(int)? onPageChanged

    • Описание: Коллбэк, который вызывается, когда пользователь переходит на новую страницу. Позволяет отслеживать, какая страница активна.

    • Пример:

      onPageChanged: (int index) {
  print('Перешли на страницу: $index');
} // Выводит номер текущей страницы в консоль

  8. List<Widget> children = const <Widget>[]

    • Описание: Список страниц, которые будут отображены в PageView.

    • Пример:

      children: <Widget>[
  Container(color: Colors.red),
  Container(color: Colors.green),
  Container(color: Colors.blue),
] // Список страниц

  9. DragStartBehavior dragStartBehavior = DragStartBehavior.start

    • Описание: Определяет, как начинается перетаскивание. Можно указать, чтобы оно начиналось в начале или в середине элемента.

    • Пример:

      dragStartBehavior: DragStartBehavior.down // Начало перетаскивания в середине элемента

  10. bool allowImplicitScrolling = false

    • Описание: Если true, позволяет неявную прокрутку, когда страница в фокусе. Это полезно, если у вас есть другие прокручиваемые виджеты.

    • Пример:

      allowImplicitScrolling: true // Позволяет неявную прокрутку

  11. String? restorationId

    • Описание: Идентификатор для восстановления состояния PageView после перезагрузки приложения.

    • Пример:

      restorationId: 'myPageView' // Идентификатор для восстановления состояния

  12. Clip clipBehavior = Clip.hardEdge

    • Описание: Определяет, как обрезается содержимое, выходящее за пределы виджета.

    • Пример:

      clipBehavior: Clip.antiAlias // Обрезает с эффектом сглаживания

  13. HitTestBehavior hitTestBehavior = HitTestBehavior.opaque

    • Описание: Определяет, как обрабатываются события касания. Например, если установлен opaque, элементы будут реагировать на касания даже если они прозрачные.

    • Пример:

      hitTestBehavior: HitTestBehavior.translucent // Позволяет реагировать на касания, если элемент полупрозрачный

  14. ScrollBehavior? scrollBehavior

    • Описание: Позволяет настроить поведение прокрутки, например, добавление эффекта при прокрутке.

    • Пример:

      scrollBehavior: ScrollBehavior() // Стандартное поведение прокрутки

  15. bool padEnds = true

    • Описание: Если true, добавляет отступы в начале и в конце PageView, чтобы страницы не прилипали к краям экрана.

    • Пример:

      padEnds: false // Отключает отступы в начале и конце

Итог

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

PreviousGridView.builder()NextSingleChildScrollView

Last updated