🧩ReorderableListView

Что такое ReorderableListView

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

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

Вот пример, как можно использовать ReorderableListView для создания простого списка задач:

import 'package:flutter/material.dart';

class ReorderableListViewExample extends StatefulWidget {
  const ReorderableListViewExample({super.key});

  @override
  _ReorderableListViewExampleState createState() =>
      _ReorderableListViewExampleState();
}

class _ReorderableListViewExampleState
    extends State<ReorderableListViewExample> {
  List<String> _items = ["Task 1", "Task 2", "Task 3", "Task 4"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ReorderableListView Example')),
      body: ReorderableListView(
        onReorder: _onReorder,
        children: [
          for (final item in _items)
            Container(
              key: ValueKey(item),
              height: 100,
              margin: const EdgeInsets.all(10),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.grey[200],
                border: Border.all(color: Colors.grey),
              ),
              child: ListTile(
                key: ValueKey(item),
                title: Text(item),
                trailing: const Icon(Icons.drag_handle),
              ),
            ),
        ],
      ),
    );
  }

  void _onReorder(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex--;
      }
      final item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  }
}

  1. ReorderableListView: Это основной виджет, который позволяет изменять порядок элементов в списке.

  2. onReorder: Это функция, которая вызывается при изменении порядка элементов. В ней мы обновляем список элементов.

  3. children: Список виджетов, которые будут отображаться в ReorderableListView. Каждый элемент должен иметь уникальный ключ, чтобы Flutter мог отслеживать изменения.

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

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

  • Списки задач

  • Приложения для заметок

  • Приложения для управления проектами

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

  1. List<Widget> children

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

    • Пример:

      children: [ // Список элементов
  ListTile(key: ValueKey('item1'), title: Text('Item 1')),
  ListTile(key: ValueKey('item2'), title: Text('Item 2')),
]

  2. void Function(int, int) onReorder

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

    • Пример:

      onReorder: (oldIndex, newIndex) {
  // Логика изменения порядка
}

  3. void Function(int)? onReorderStart

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

    • Пример:

      onReorderStart: (index) {
  // Логика при начале перетаскивания
}

  4. void Function(int)? onReorderEnd

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

    • Пример:

      onReorderEnd: (index) {
  // Логика при завершении перетаскивания
}

  5. double? itemExtent

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

    • Пример:

      itemExtent: 70.0 // Высота каждого элемента 70 пикселей

  6. double? Function(int, SliverLayoutDimensions)? itemExtentBuilder

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

    • Пример:

      itemExtentBuilder: (index, dimensions) {
  return dimensions.getBoxConstraints().maxHeight; // Возвращает максимальную высоту элемента
}

  7. Widget? prototypeItem

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

    • Пример:

      prototypeItem: ListTile(title: Text('Prototype Item')) // Шаблон элемента

  8. Widget Function(Widget, int, Animation<double>)? proxyDecorator

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

    • Пример:

      proxyDecorator: (child, index, animation) {
  return Opacity(opacity: animation.value, child: child); // Прозрачность во время перетаскивания
}

  9. bool buildDefaultDragHandles = true

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

    • Пример:

      buildDefaultDragHandles: false // Использовать свои ручки

  10. EdgeInsets? padding

    • Описание: Устанавливает отступы вокруг списка.

    • Пример:

      padding: EdgeInsets.all(8.0) // Отступы вокруг списка

  11. Widget? header

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

    • Пример:

      header: Text('My Tasks') // Заголовок списка

  12. Widget? footer

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

    • Пример:

      footer: Text('End of Tasks') // Подвал списка

  13. Axis scrollDirection = Axis.vertical

    • Описание: Указывает направление прокрутки списка (вертикально или горизонтально).

    • Пример:

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

  14. bool reverse = false

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

    • Пример:

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

  15. ScrollController? scrollController

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

    • Пример:

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

  16. bool? primary

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

    • Пример:

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

  17. ScrollPhysics? physics

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

    • Пример:

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

  18. bool shrinkWrap = false

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

    • Пример:

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

  19. double anchor = 0.0

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

    • Пример:

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

  20. double? cacheExtent

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

    • Пример:

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

  21. DragStartBehavior dragStartBehavior = DragStartBehavior.start

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

    • Пример:

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

  22. ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual

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

    • Пример:

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

  23. String? restorationId

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

    • Пример:

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

  24. Clip clipBehavior = Clip.hardEdge

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

    • Пример:

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

  25. double? autoScrollerVelocityScalar

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

    • Пример:

      autoScrollerVelocityScalar: 1.5 // Скорость прокрутки в 1.5 раза выше

Заключение

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

PreviousCustomScrollViewNextNestedScrollView

Last updated