🧩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 предоставляет мощный инструмент для создания сложных пользовательских интерфейсов, позволяя комбинировать несколько уровней прокрутки. С его помощью можно создавать плавные и интерактивные приложения, которые значительно улучшают взаимодействие пользователей с вашими приложениями.