🧩CustomScrollView

Что такое CustomScrollView

CustomScrollView — это специальный виджет в Flutter, который позволяет вам комбинировать различные прокручиваемые элементы (например, списки и сетки) в одном скроллере. Представьте себе, что вы создаете многоуровневую библиотеку с разными категориями книг. CustomScrollView позволяет вам объединять разные типы представления (например, списки и сетки) в одном прокручиваемом представлении, создавая тем самым удобный интерфейс для пользователя.

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

Вот пример простого использования CustomScrollView с двумя различными типами слоев:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CustomScrollView Example')),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            title: const Text('Sliver App Bar', style: TextStyle(color: Colors.white),),
            expandedHeight: 200.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network('https://i.postimg.cc/nLqtWXht/1.png', fit: BoxFit.cover),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item $index'),
                );
              },
              childCount: 20,
            ),
          ),
          SliverGrid(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
            ),
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  color: Colors.teal,
                  child: Center(child: Text('Grid Item $index')),
                );
              },
              childCount: 10,
            ),
          ),
        ],
      ),
    );
  }
}

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

  1. CustomScrollView: Это основной виджет, который обеспечивает прокрутку содержимого.

  2. slivers: Это список элементов, которые будут прокручиваться. Здесь мы используем три типа:

    • SliverAppBar: Прокручивающаяся верхняя панель с заголовком и изображением.

    • SliverList: Простой список с 20 элементами.

    • SliverGrid: Сетка с 10 элементами, организованная в два столбца.

  3. Каждый из этих слоев (слевер) будет прокручиваться вместе, создавая единое целое.

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

CustomScrollView позволяет:

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

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

  • Создавать сложные пользовательские интерфейсы: Создание интересных и разнообразных интерфейсов, которые улучшают взаимодействие с пользователем.

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

  1. Axis scrollDirection = Axis.vertical

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

    • Пример:

      scrollDirection: Axis.horizontal // Прокрутка по горизонтали

  2. bool reverse = false

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

    • Пример:

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

  3. ScrollController? controller

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

    • Пример:

      controller: ScrollController() // Контроллер для управления прокруткой

  4. bool? primary

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

    • Пример:

      primary: true // Этот виджет является основным для прокрутки

  5. ScrollPhysics? physics

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

    • Пример:

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

  6. ScrollBehavior? scrollBehavior

    • Описание: Определяет поведение прокрутки, включая то, как обрабатываются события касания.

    • Пример:

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

  7. bool shrinkWrap = false

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

    • Пример:

      shrinkWrap: true // Уменьшение размера до минимального необходимого

  8. Key? center

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

    • Пример:

      center: Key('myScrollViewCenter') // Устанавливает ключ для центра

  9. double anchor = 0.0

    • Описание: Определяет точку, вокруг которой будет происходить прокрутка. Значение от 0.0 до 1.0, где 0.0 — это верхняя часть, а 1.0 — нижняя часть.

    • Пример:

      anchor: 0.5 // Прокрутка вокруг средней точки

  10. double? cacheExtent

    • Описание: Определяет, сколько пикселей нужно кэшировать за пределами видимого пространства. Это улучшает производительность при прокрутке.

    • Пример:

      cacheExtent: 1000.0 // Кэширование 1000 пикселей

  11. List<Widget> slivers = const <Widget>[]

    • Описание: Список "слеверов", которые будут прокручиваться внутри CustomScrollView.

    • Пример:

      slivers: [ // Список слеверов
  SliverList(...),
  SliverGrid(...),
]

  12. int? semanticChildCount

    • Описание: Количество дочерних элементов для семантической обработки. Помогает в доступности приложения.

    • Пример:

      semanticChildCount: 10 // Количество семантических дочерних элементов

  13. DragStartBehavior dragStartBehavior = DragStartBehavior.start

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

    • Пример:

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

  14. ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual

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

    • Пример:

      keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag // Клавиатура скрывается при перетаскивании

  15. String? restorationId

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

    • Пример:

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

  16. Clip clipBehavior = Clip.hardEdge

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

    • Пример:

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

  17. HitTestBehavior hitTestBehavior = HitTestBehavior.opaque

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

    • Пример:

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

Итог

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

PreviousSingleChildScrollViewNextReorderableListView

Last updated