🧩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'),),
        ],
      ),
    );
  }
}

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

ListView — это основной виджет, который создаёт вертикальный или горизонтальный список.
children — это список виджетов, которые будут отображены в ListView. В нашем примере мы используем ListTile для каждого элемента.
Когда приложение запускается, Flutter отображает список элементов, которые можно прокручивать, если они не помещаются на экране.

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

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

Динамические данные: Если у вас есть данные, которые могут меняться (например, список пользователей, новостей или продуктов), ListView позволяет вам легко отображать эти данные.
Прокрутка: Когда элементов много, и они не помещаются на экране, ListView автоматически добавляет возможность прокрутки.
Гибкость: Вы можете настроить ListView для различных сценариев, таких как вертикальная или горизонтальная прокрутка, фиксированная высота элементов и многое другое.

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

Key? key
- Описание: Уникальный ключ для виджета, который помогает Flutter отслеживать изменения в виджетах. Полезен при работе со сложными структурами.
- Пример:
  key: ValueKey('myListView') // Уникальный ключ для ListView
Axis scrollDirection = Axis.vertical
- Описание: Указывает направление прокрутки. По умолчанию вертикально, но можно задать горизонтально.
- Пример:
  scrollDirection: Axis.horizontal // Прокрутка по горизонтали
bool reverse = false
- Описание: Если true, список будет прокручиваться в обратном направлении, начиная с конца.
- Пример:
  reverse: true // Прокрутка в обратном направлении
ScrollController? controller
- Описание: Позволяет управлять прокруткой ListView с помощью контроллера.
- Пример:
  controller: ScrollController() // Используем контроллер для управления прокруткой
bool? primary
- Описание: Указывает, является ли ListView основным элементом прокрутки. Обычно используется в рамках других прокручиваемых виджетов.
- Пример:
  primary: true // Указывает, что это основной элемент прокрутки
ScrollPhysics? physics
- Описание: Позволяет настроить поведение прокрутки (например, эффект пружины).
- Пример:
  physics: BouncingScrollPhysics() // Прокрутка с эффектом пружины
bool shrinkWrap = false
- Описание: Если true, ListView будет занимать только столько места, сколько необходимо для отображения элементов, а не расширяться на весь экран.
- Пример:
  shrinkWrap: true // Занимает только необходимое пространство
EdgeInsetsGeometry? padding
- Описание: Указывает отступы вокруг содержимого списка.
- Пример:
  padding: EdgeInsets.all(8.0) // Отступы со всех сторон
double? itemExtent
- Описание: Указывает фиксированную высоту (или ширину) элементов списка. Полезно для оптимизации производительности.
- Пример:
  itemExtent: 100.0 // Фиксированная высота элементов в 100 пикселей
double? Function(int, SliverLayoutDimensions)? itemExtentBuilder
- Описание: Позволяет динамически вычислять размер элементов в зависимости от их индекса.
- Пример:
  itemExtentBuilder: (index, dimensions) => 50.0 + index * 10 // Изменяет высоту каждого элемента
Widget? prototypeItem
- Описание: Позволяет задать "прототип" элемента списка, который будет использован для определения его размеров.
- Пример:
  prototypeItem: ListTile(title: Text('Prototype Item')) // Прототип элемента
bool addAutomaticKeepAlives = true
- Описание: Если true, элементы списка будут сохраняться в памяти, чтобы не терять состояние при прокрутке.
- Пример:
  addAutomaticKeepAlives: false // Отключает автоматическое сохранение состояния
bool addRepaintBoundaries = true
- Описание: Если true, виджеты будут перерисовываться только тогда, когда это необходимо, что помогает улучшить производительность.
- Пример:
  addRepaintBoundaries: false // Отключает добавление границ для перерисовки
bool addSemanticIndexes = true
- Описание: Если true, автоматически добавляет семантические индексы для улучшения доступности.
- Пример:
  addSemanticIndexes: false // Отключает автоматическое добавление семантических индексов
double? cacheExtent
- Описание: Указывает, сколько места в пикселях следует кэшировать за пределами видимой области списка.
- Пример:
  cacheExtent: 200.0 // Кэширует 200 пикселей за пределами видимой области
List<Widget> children = const <Widget>[]
- Описание: Список виджетов, которые будут отображаться в ListView.
- Пример:
  children: <Widget>[ ListTile(title: Text('Item 1')), ListTile(title: Text('Item 2')), ] // Список элементов
int? semanticChildCount
- Описание: Позволяет указать количество семантических детей для улучшения доступности.
- Пример:
  semanticChildCount: 5 // Указывает количество семантических детей
DragStartBehavior dragStartBehavior = DragStartBehavior.start
- Описание: Определяет поведение начала перетаскивания (в начале или в середине элемента).
- Пример:
  dragStartBehavior: DragStartBehavior.down // Начало перетаскивания в середине элемента
ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual
- Описание: Определяет поведение при закрытии клавиатуры (например, вручную или автоматически).
- Пример:
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag // Закрытие клавиатуры при перетаскивании
String? restorationId
- Описание: Идентификатор для восстановления состояния при изменениях в приложении.
- Пример:
  restorationId: 'myListView' // Идентификатор для восстановления состояния
Clip clipBehavior = Clip.hardEdge
- Описание: Определяет, как обрезать содержимое, которое выходит за пределы виджета.
- Пример:
  clipBehavior: Clip.antiAlias // Обрезает с эффектом сглаживания
HitTestBehavior hitTestBehavior = HitTestBehavior.opaque
- Описание: Определяет, как обрабатывать события касания. Например, opaque позволяет элементам реагировать на касания, даже если они прозрачные.
- Пример:
  hitTestBehavior: HitTestBehavior.translucent // Позволяет реагировать на касания, если элемент полупрозрачный

Итог

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

PreviousСписки и прокрутка NextListView.builder()

Last updated 8 months ago

Что такое ListView