🧩NestedScrollView

Что такое NestedScrollView

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

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

Вот пример, где NestedScrollView используется для создания экрана с заголовком и списком, который прокручивается:

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              title: const Text('Nested Scroll View Example'),
              floating: true,
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                background: Image.network(
                  'https://i.postimg.cc/nLqtWXht/1.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('Item #$index'),
            );
          },
        ),
      ),
    );
  }
}

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

  1. NestedScrollView: Это основной виджет, который объединяет заголовок и содержимое, позволяя им прокручиваться вместе.

  2. headerSliverBuilder: Функция, которая строит заголовок, который будет прокручиваться вместе с содержимым. В данном случае мы используем SliverAppBar.

  3. body: Основное содержимое, в этом примере — это ListView.builder, который отображает список элементов.

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

NestedScrollView полезен в случаях, когда вам нужно объединить несколько прокручиваемых виджетов. Например:

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

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

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

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

  1. ScrollController? controller

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

    • Пример:

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

  2. Axis scrollDirection = Axis.vertical

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

    • Пример:

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

  3. bool reverse = false

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

    • Пример:

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

  4. ScrollPhysics? physics

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

    • Пример:

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

  5. required List<Widget> Function(BuildContext, bool) headerSliverBuilder

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

    • Пример:

      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
  return <Widget>[
    SliverAppBar(
      title: Text('Header'),
      floating: true,
    ),
  ];
}

  6. required Widget body

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

    • Пример:

      body: ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) => ListTile(title: Text('Item #$index')),
) // Основное содержимое

  7. DragStartBehavior dragStartBehavior = DragStartBehavior.start

    • Описание: Определяет поведение при начале перетаскивания. Может быть "start" или "down".

    • Пример:

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

  8. bool floatHeaderSlivers = false

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

    • Пример:

      floatHeaderSlivers: true // Заголовок остается видимым при прокрутке

  9. Clip clipBehavior = Clip.hardEdge

    • Описание: Указывает, как будут обрабатываться элементы, выходящие за пределы виджета. Может быть "hardEdge", "antiAlias", "none".

    • Пример:

      clipBehavior: Clip.antiAlias // Антиалиасинг для элементов

  10. HitTestBehavior hitTestBehavior = HitTestBehavior.opaque

    • Описание: Определяет, как обрабатываются события касания. Может быть "opaque" (все касания регистрируются) или "translucent" (только касания, которые не попадают на другие элементы).

    • Пример:

      hitTestBehavior: HitTestBehavior.translucent // Обработка касаний только для видимых элементов

  11. String? restorationId

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

    • Пример:

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

  12. ScrollBehavior? scrollBehavior

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

    • Пример:

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

Заключение

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

PreviousReorderableListViewNextКнопки

Last updated