🧩ListView()

Что такое ListView

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

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

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

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('ListView Example')),
      body: ListView(
        children: const <Widget>[
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
          ListTile(title: Text('Item 3')),
          ListTile(title: Text('Item 4')),
          ListTile(title: Text('Item 5'),),
          ListTile(title: Text('Item 6')),
          ListTile(title: Text('Item 7')),
          ListTile(title: Text('Item 8')),
          ListTile(title: Text('Item 9')),
          ListTile(title: Text('Item 10')),
          ListTile(title: Text('Item 11'),),
          ListTile(title: Text('Item 12')),
          ListTile(title: Text('Item 13')),
          ListTile(title: Text('Item 14')),
          ListTile(title: Text('Item 15'),),
          ListTile(title: Text('Item 16')),
          ListTile(title: Text('Item 17')),
          ListTile(title: Text('Item 18'),),
        ],
      ),
    );
  }
}

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

1. ListView — это основной виджет, который создаёт вертикальный или горизонтальный список.

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

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

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

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

• Динамические данные: Если у вас есть данные, которые могут меняться (например, список пользователей, новостей или продуктов), ListView позволяет вам легко отображать эти данные.

• Прокрутка: Когда элементов много, и они не помещаются на экране, ListView автоматически добавляет возможность прокрутки.

• Гибкость: Вы можете настроить ListView для различных сценариев, таких как вертикальная или горизонтальная прокрутка, фиксированная высота элементов и многое другое.

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

1. Key? key

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

   • Пример:

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

2. Axis scrollDirection = Axis.vertical

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

   • Пример:

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

3. bool reverse = false

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

   • Пример:

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

4. ScrollController? controller

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

   • Пример:

     controller: ScrollController() // Используем контроллер для управления прокруткой

5. bool? primary

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

   • Пример:

     primary: true // Указывает, что это основной элемент прокрутки

6. ScrollPhysics? physics

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

   • Пример:

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

7. bool shrinkWrap = false

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

   • Пример:

     shrinkWrap: true // Занимает только необходимое пространство

8. EdgeInsetsGeometry? padding

   • Описание: Указывает отступы вокруг содержимого списка.

   • Пример:

     padding: EdgeInsets.all(8.0) // Отступы со всех сторон

9. double? itemExtent

   • Описание: Указывает фиксированную высоту (или ширину) элементов списка. Полезно для оптимизации производительности.

   • Пример:

     itemExtent: 100.0 // Фиксированная высота элементов в 100 пикселей

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

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

    • Пример:

      itemExtentBuilder: (index, dimensions) => 50.0 + index * 10 // Изменяет высоту каждого элемента

11. Widget? prototypeItem

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

    • Пример:

      prototypeItem: ListTile(title: Text('Prototype Item')) // Прототип элемента

12. bool addAutomaticKeepAlives = true

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

    • Пример:

      addAutomaticKeepAlives: false // Отключает автоматическое сохранение состояния

13. bool addRepaintBoundaries = true

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

    • Пример:

      addRepaintBoundaries: false // Отключает добавление границ для перерисовки

14. bool addSemanticIndexes = true

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

    • Пример:

      addSemanticIndexes: false // Отключает автоматическое добавление семантических индексов

15. double? cacheExtent

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

    • Пример:

      cacheExtent: 200.0 // Кэширует 200 пикселей за пределами видимой области

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

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

    • Пример:

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

17. int? semanticChildCount

    • Описание: Позволяет указать количество семантических детей для улучшения доступности.

    • Пример:

      semanticChildCount: 5 // Указывает количество семантических детей

18. DragStartBehavior dragStartBehavior = DragStartBehavior.start

    • Описание: Определяет поведение начала перетаскивания (в начале или в середине элемента).

    • Пример:

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

19. ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual

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

    • Пример:

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

20. String? restorationId

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

    • Пример:

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

21. Clip clipBehavior = Clip.hardEdge

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

    • Пример:

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

22. HitTestBehavior hitTestBehavior = HitTestBehavior.opaque

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

    • Пример:

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

Итог

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