[Программирование, Разработка под Android, Flutter] Flutter ListView и ScrollPhysics: Детальный взгляд (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Подробное изучение виджета ListView и его особенностей.
Некоторое время назад я написал статью об основах использования ListView и GridView во Flutter. Эта статья предназначена для более детального изучения класса ListView, ScrollPhysics, а также параметров конфигурирования и оптимизаций для общего виджета.ListView во Flutter представляет собой линейный список прокручиваемых элементов. Мы можем использовать его для создания прокручиваемого списка или списка повторяющихся элементов.Изучение типов ListViewМы начнем с рассмотрения типов ListViews, а позже рассмотрим другие возможности и усовершенствования для него.Рассмотрим типы ListViews:
- ListView
- ListView.builder
- ListView.separated
- ListView.custom
Давайте исследовать эти типы один за другим:ListViewЭто дефолтный конструктор класса ListView. ListView просто берет список дочерних элементов и делает из него список с возможностью прокрутки.
Список, построенный с использованием конструктора по умолчаниюОбщий формат кода:
ListView(
children: <Widget>[
ItemOne(),
ItemTwo(),
ItemThree(),
],
),
ListView.builder()Конструктор builder() строит повторяющийся список элементов. Конструктор принимает два основных параметра: itemCount для подсчета количества элементов в списке и itemBuilder конструктор для каждого построенного элемента списка.
Список, построенный с помощью конструктора builder()Общий формат кода:
ListView.builder(
itemCount: itemCount,
itemBuilder: (context, position) {
return listItem();
},
),
Хитрый трюк: так как они загружаются не сразу и только необходимое количество, нам на самом деле не нужно, чтобы item Count (счетчик элементов) был в качестве обязательного параметра, таким образом список может быть бесконечным.
ListView.builder(
itemBuilder: (context, position) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Text(position.toString(), style: TextStyle(fontSize: 22.0),),
),
);
},
),
ListView без параметра ItemCountListView.separated()В конструкторе separated() мы генерируем список и можем указать разделитель между каждым элементом.
separated()По сути, мы строим два переплетенных списка: один как основной, другой как разделительный.Обратите внимание, что бесконечный счетчик, обсуждавшийся в предыдущем конструкторе, не может быть использован здесь. Этот конструктор принудительно приводит в действие счетчик элементов itemCount.Код для этого типа идет как:
ListView.separated(
itemBuilder: (context, position) {
return ListItem();
},
separatorBuilder: (context, position) {
return SeparatorItem();
},
itemCount: itemCount,
),
Этот тип списка позволяет динамически определять разделители, иметь различные типы разделителей для различных типов элементов, добавлять или удалять разделители по мере необходимости и т.д.Данная реализация также может быть использована для вставки других типов элементов (например, рекламы) легко и без внесения каких-либо изменений в основной список в середине элементов списка.
Пример показывает рекламу, когда Position делится на 4Примечание: Длина списка разделителей на 1 единицу меньше, чем список элементов, так как после последнего элемента разделитель не ставится.ListView.custom()Конструктор custom(), как подсказывает его название, позволяет создавать ListViews с с индивидуальными функциональными возможностями для построения дочерних элементов списка. Основным параметром, необходимым для этого, является SliverChildDelegate, который формирует компоненты. Существуют следующие типы SliverChildDelegates :
- SliverChildListDelegate
- SliverChildBuilderDelegate .
SliverChildListDelegate принимает прямой дочерний список, в то время как SliverChildBuiderDelegate принимает IndexedWidgetBuilder (Функция сборщика, которую мы используем).Вы можете использовать или разбить их на подклассы для создания собственных участников списка.
ListView.builder по сути является ListView.custom с функцией SliverChildBuilderDelegate.
Конструктор по умолчанию ListView ведет себя как ListView.custom с SliverChildListDelegate.
Теперь, когда мы закончили с типами ListViews, давайте взглянем на ScrollPhysics.Изучение ScrollPhysicsДля управления прокруткой мы устанавливаем физический параметр в конструкторе ListView. Различные типы этого параметра:NeverScrollableScrollPhysics .NeverScrollScrollPhysics запрещает прокрутку списка. Используйте это, чтобы полностью отключить прокрутку ListView.BouncingScrollPhysics .BouncingScrollPhysics возвращает список обратно, когда список заканчивается. Аналогичный эффект используется на iOS.
ClamppingScrollPhysicsЭто функция прокрутки, которая по умолчанию используется на Android. Список останавливается в конце и показывает индикацию этого действия.
FixedExtentScrollPhysicsЭто немного отличается от других списков в том смысле, что работает только с FixedExtendScrollControllers и списками, которые их используют. Для примера возьмём ListWheelScrollView, который делает список, напоминающий по форме колесо.FixedExtentScrollPhysics только прокручивает элементы вместо любого смещения между ними.
Код для этого примера невероятно прост:
FixedExtentScrollController fixedExtentScrollController =
new FixedExtentScrollController();
ListWheelScrollView(
controller: fixedExtentScrollController,
physics: FixedExtentScrollPhysics(),
children: monthsOfTheYear.map((month) {
return Card(
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
month,
style: TextStyle(fontSize: 18.0),
),
)),
],
));
}).toList(),
itemExtent: 60.0,
),
Ещё несколько вещей, которые нужно знать.Как сохранить элементы, которые удаляются при работе со списком ?Flutter позволяет использовать виджет KeepAlive(), сохраняющий элемент, который в противном случае был бы удален. В списке элементы по умолчанию встроены в виджет AutomaticKeepAlive.
AutomaticKeepAlives можно отключить, установив в поле addAutomaticKeepAlives значение false. Это полезно в тех случаях, когда элементы не нуждаются в сохранении или в пользовательской версии KeepAlive.Почему мой ListView имеет отступ между списком и внешним виджетом?По умолчанию ListView имеет отступ между списком и внешним виджетом, чтобы удалить его, установите EdgeInsets.all(0.0).Вот и все для этой статьи! Надеюсь, вам понравилось. Продолжайте следить за мной, чтобы узнать больше о Flutter, оставляйте свои мнения и комментарии.
Перевод статьи подготовлен в преддверии старта курса «Flutter Mobile Developer».
В преддверии старта курса приглашаем всех желающих записаться на бесплатны демо-урок по теме: «Графика во Flutter».
На уроке участники вместе с экспертом-ведущим разберут, как устроен рендеринг во Flutter и изучат основные компоненты библиотеки dart:ui.
===========
Источник:
habr.com
===========
===========
Автор оригинала: Deven Joshi
===========Похожие новости:
- [Разработка под iOS, Разработка мобильных приложений, Разработка под Android, Аналитика мобильных приложений] Как мы просто сократили объем входящего в дата-центр трафика на 70%
- [Программирование, Java, ООП, Функциональное программирование] Java Optional не такой уж очевидный (перевод)
- [DevOps] Рекомендации по Ansible (перевод)
- [Программирование, Анализ и проектирование систем, Хакатоны] Группа «М.Видео-Эльдорадо» приглашает на онлайн-контест для аналитиков
- [Программирование, C++, Алгоритмы, Математика] Пишем свой парсер математических выражений и калькулятор командной строки (перевод)
- Развиваемая Huawei платформа HarmonyOS для смартфонов оказалась переделанным Android 10
- [Программирование, Go, WebAssembly] Запускаем AssemblyScript в Go
- [Программирование, Проектирование и рефакторинг, API, Google API] Проектирование API: почему для представления отношений в API лучше использовать ссылки, а не ключи (перевод)
- [Cobol] Enterprise COBOL: пример проекта (перевод)
- [Настройка Linux, Сетевые технологии] Сетевая подсистема в ОС
Теги для поиска: #_programmirovanie (Программирование), #_razrabotka_pod_android (Разработка под Android), #_flutter, #_programmirovanie (программирование), #_flutter, #_android, #_blog_kompanii_otus (
Блог компании OTUS
), #_programmirovanie (
Программирование
), #_razrabotka_pod_android (
Разработка под Android
), #_flutter
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:54
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Подробное изучение виджета ListView и его особенностей.  Некоторое время назад я написал статью об основах использования ListView и GridView во Flutter. Эта статья предназначена для более детального изучения класса ListView, ScrollPhysics, а также параметров конфигурирования и оптимизаций для общего виджета.ListView во Flutter представляет собой линейный список прокручиваемых элементов. Мы можем использовать его для создания прокручиваемого списка или списка повторяющихся элементов.Изучение типов ListViewМы начнем с рассмотрения типов ListViews, а позже рассмотрим другие возможности и усовершенствования для него.Рассмотрим типы ListViews:
 Список, построенный с использованием конструктора по умолчаниюОбщий формат кода: ListView(
children: <Widget>[ ItemOne(), ItemTwo(), ItemThree(), ], ),  Список, построенный с помощью конструктора builder()Общий формат кода: ListView.builder(
itemCount: itemCount, itemBuilder: (context, position) { return listItem(); }, ), ListView.builder(
itemBuilder: (context, position) { return Card( child: Padding( padding: const EdgeInsets.all(16.0), child: Text(position.toString(), style: TextStyle(fontSize: 22.0),), ), ); }, ),  ListView без параметра ItemCountListView.separated()В конструкторе separated() мы генерируем список и можем указать разделитель между каждым элементом.  separated()По сути, мы строим два переплетенных списка: один как основной, другой как разделительный.Обратите внимание, что бесконечный счетчик, обсуждавшийся в предыдущем конструкторе, не может быть использован здесь. Этот конструктор принудительно приводит в действие счетчик элементов itemCount.Код для этого типа идет как: ListView.separated(
itemBuilder: (context, position) { return ListItem(); }, separatorBuilder: (context, position) { return SeparatorItem(); }, itemCount: itemCount, ),  Пример показывает рекламу, когда Position делится на 4Примечание: Длина списка разделителей на 1 единицу меньше, чем список элементов, так как после последнего элемента разделитель не ставится.ListView.custom()Конструктор custom(), как подсказывает его название, позволяет создавать ListViews с с индивидуальными функциональными возможностями для построения дочерних элементов списка. Основным параметром, необходимым для этого, является SliverChildDelegate, который формирует компоненты. Существуют следующие типы SliverChildDelegates :
ListView.builder по сути является ListView.custom с функцией SliverChildBuilderDelegate.
Конструктор по умолчанию ListView ведет себя как ListView.custom с SliverChildListDelegate.  ClamppingScrollPhysicsЭто функция прокрутки, которая по умолчанию используется на Android. Список останавливается в конце и показывает индикацию этого действия.  FixedExtentScrollPhysicsЭто немного отличается от других списков в том смысле, что работает только с FixedExtendScrollControllers и списками, которые их используют. Для примера возьмём ListWheelScrollView, который делает список, напоминающий по форме колесо.FixedExtentScrollPhysics только прокручивает элементы вместо любого смещения между ними.  Код для этого примера невероятно прост: FixedExtentScrollController fixedExtentScrollController =
new FixedExtentScrollController(); ListWheelScrollView( controller: fixedExtentScrollController, physics: FixedExtentScrollPhysics(), children: monthsOfTheYear.map((month) { return Card( child: Row( children: <Widget>[ Expanded( child: Padding( padding: const EdgeInsets.all(8.0), child: Text( month, style: TextStyle(fontSize: 18.0), ), )), ], )); }).toList(), itemExtent: 60.0, ),  AutomaticKeepAlives можно отключить, установив в поле addAutomaticKeepAlives значение false. Это полезно в тех случаях, когда элементы не нуждаются в сохранении или в пользовательской версии KeepAlive.Почему мой ListView имеет отступ между списком и внешним виджетом?По умолчанию ListView имеет отступ между списком и внешним виджетом, чтобы удалить его, установите EdgeInsets.all(0.0).Вот и все для этой статьи! Надеюсь, вам понравилось. Продолжайте следить за мной, чтобы узнать больше о Flutter, оставляйте свои мнения и комментарии. Перевод статьи подготовлен в преддверии старта курса «Flutter Mobile Developer».
В преддверии старта курса приглашаем всех желающих записаться на бесплатны демо-урок по теме: «Графика во Flutter». На уроке участники вместе с экспертом-ведущим разберут, как устроен рендеринг во Flutter и изучат основные компоненты библиотеки dart:ui. =========== Источник: habr.com =========== =========== Автор оригинала: Deven Joshi ===========Похожие новости:
Блог компании OTUS ), #_programmirovanie ( Программирование ), #_razrabotka_pod_android ( Разработка под Android ), #_flutter |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 12:54
Часовой пояс: UTC + 5