Flutter ListView: отображение динамических данных с помощью ListView во Flutter

Flutter — это SDK для мобильных приложений от Google, который помогает создавать современные мобильные приложения для iOS и Android с использованием единой базы кода. Это новый участник кроссплатформенной разработки мобильных приложений, и в отличие от других фреймворков, таких как React Native, он использует не JavaScript, а Dart в качестве языка программирования.

Если вы не знаете, как Чтобы установить Flutter, ознакомьтесь с моей статьей о том, как установить Flutter. В реальных приложениях всегда присутствует динамический контент, который извлекается из серверной части. Итак, нам нужно отображать это содержимое, чтобы оно не раздражало пользователя при прокрутке страницы.

Что такое динамическое содержимое?

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

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

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

В большинстве случаев, динамическое поведение достигается за счет изменения содержимого, отображаемого в теле.

Что мы будет строиться с использованием Flutter ListView

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

Если длина элемента будет равна увеличились и достигли предела, при котором нам нужно прокрутить страницу вниз, затем нам нужно отобразить полосу прокрутки, чтобы быстро прокрутить страницу вниз.

Если мы не используем ListView, он выдаст предупреждение в желтой строке, чтобы указать, что нам нужно использовать какой-то виджет для отображения правильного пользовательского контента, и поэтому мы будем использовать Виджет ListView для Flutter.

Flutter ListView

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

1. ListView
2. ListView.builder
3. ListView.separated
4. ListView.custom

ListView

ListView — это конструктор по умолчанию для класса ListView. ListView принимает список дочерних элементов и делает его прокручиваемым..

 ListView (дочерние элементы:  [ItemOne (), ItemTwo (), ItemThree (),],  ), 

ListView.builder ()

Конструктор builder () создает повторяющийся список элементов. Конструктор принимает два основных параметра:

1) itemCount для количества элементов в списке и itemBuilder для создал каждый элемент списка.

Синтаксис

 ListView.builder (itemCount: itemCount, itemBuilder: (context, position) {return  listItem ();},), 

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

ListView.separated ()

В конструкторе separated () мы генерируем список , и мы можем указать разделитель между каждым элементом.

По сути, мы создаем два переплетенных списка : один как main List, один как список разделителей.

Обратите внимание, что бесконечный счетчик предыдущего конструктора здесь не может использоваться, и конструктор принудительно применяет itemCount.

 ListView.separated (  я  temBuilder: (контекст, позиция) {return ListItem ();  }, separatorBuilder: (контекст, позиция) {return SeparatorItem ();  }, itemCount: itemCount,), 

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

Эту реализацию также можно использовать для вставки других типов элементов (например, рекламы) быстро и без каких-либо изменений в основном списке в середине элементов списка.

Пример ListView

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

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

Мы будем использовать конструктор ListView.builder для отображения элементов. Давайте создадим новое приложение в коде Visual Studio.

Шаг 1. Создайте новый проект флаттера

Перейдите в VSCode и нажмите сочетания клавиш: cmd + shift + p и введите Flutter, и он покажет, как создать новый вариант проекта, и он создаст новый проект флаттера в указанной папке.

Кроме того, создайте одну папку с именем assets в корне проекта; мы скопируем одно изображение в эту папку для отображения внутри приложения Flutter.

Теперь мы собираемся показать изображение из локальной папки. Итак, нам нужно добавить изображение в файл pubspec.yaml .

Добавьте следующую строку кода внутри pubspec.yaml файл.

 assets: - assets/macbook.jpg 

Flutter по умолчанию уже закомментировал строку; вам нужно раскомментировать его и заменить первую строку на assets/ваш файл изображения с расширением.

Если вы все еще не знаете, как отобразить изображение внутри приложения Flutter, затем ознакомьтесь с разделом «Как отображать изображение во Flutter».

Шаг 2. Напишите виджет с отслеживанием состояния

Сейчас , если вы не знаете, как написать виджет с отслеживанием состояния во Flutter, ознакомьтесь с моей статьей.

Напишите следующий код внутри файла main.dart .

//main.dartimport 'package: flutter/material.dart'; void main () => runApp (MyApp ()); класс MyApp расширяет StatefulWidget {@override State  createState  () {возврат _MyAppState ();  }} класс _MyAppState расширяет State  {List  _products = ['Laptop'];  @override Сборка виджета (контекст BuildContext) {return MaterialApp (theme: ThemeData (primarySwatch: Colors.deepPurple), главная: Scaffold (appBar: AppBar (title: Text ('Long List App')), body: Column (children: [  Контейнер (поле: EdgeInsets.all (10.0), дочерний элемент: RaisedButton (цвет: Theme.of (context) .primaryColor, splashColor: Colors.blueGrey, textColor: Colors.white, onPressed: () {setState (() {_products.  add ('Macbook');});}, child: Text ('Добавить ноутбуки'))), Column (children: _products .map ((element) => Card (child: Column (children:  [Image  .asset ('assets/macbook.jpg'), Text (элемент, стиль: TextStyle (цвет: Colors.deepPurple))],),)) .toList ()),]),),);  }} 

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

Мы отображаем два элемента.

1. Image
2. Text

Теперь сохраните файл, перейдите в терминал и введите следующую команду.

 flutter run -d all 

Убедитесь, что; вы открыли симулятор iOS и эмулятор Android. После процесса компиляции вы увидите что-то вроде этого.

Теперь нажмите кнопку Добавить ноутбуки , и вы увидите, что второй элемент добавлен в массив.

Теперь попробуйте добавить два или более элементов; вы увидите желтое предупреждение, как показано ниже.

Чтобы устранить для решения этой проблемы нам нужен виджет ListView.builder () и позвольте нам этот виджет.

Шаг 3. Добавьте виджет ListView.builder ()

Давайте разберемся с виджетом ListView.builder ().

Конструктор ListView.builder

Он создает прокручиваемый линейный массив виджетов, которые создаются по запросу.

Конструктор ListView.builder () подходит для списковых представлений с большим (или бесконечным) числом дочерних элементов, потому что конструктор вызывается только для тех дочерних элементов, которые видны.

Обеспечение ненулевое значение itemCount улучшает способность ListView оценивать максимальную степень прокрутки.

Обратный вызов itemBuilder будет вызывается только с индексами больше или равными нулю и меньше чем itemCount .

Следующим шагом будет разделение нашей кодовой базы на два файла.

1. products.dart
2. main.dart

Файл products.dart отвечает только за отображение элементов в виджете карточки с виджетом конструктора ListView.builder .

Создайте один файл с именем products.dart внутри папки lib и добавьте следующий код.

//products.dartimport 'package: flutter/material.dart  '; class Products расширяет StatelessWidget {final List  products;  Продукты (this.products);  Widget _buildProductItem (BuildContext context, int index) {return Card (child: Column (children:  [Image.asset ('assets/macbook.jpg'), Text (products [index]], style: TextStyle (color: Colors)  .темно-фиолетовый)) ], ), );  } @override Сборка виджета (контекст BuildContext) {return ListView.builder (itemBuilder: _buildProductItem, itemCount: products.length,);  }} 

Итак, это класс Products, у которого есть один метод, называемый _buildProductItem. Эта функция возвращает виджет ListView.builder .

ListView.builder widget принимает два аргумента. Одна — это функция, которая возвращает виджет, а вторая — itemCount, которая представляет собой длину массива продуктов.

Теперь импортируйте products.dart файл внутри файла main.dart .

//main.dartimport 'package: flutter/material.dart'; import './products.dart';  void main () => runApp (MyApp ()); класс MyApp расширяет StatefulWidget {@override State  createState () {return _MyAppState ();  }} класс _MyAppState расширяет State  {List  _products = [];  @override void initState () {super.initState ();  _products.add («Ноутбук»);  } @override Сборка виджета (контекст BuildContext) {return MaterialApp (theme: ThemeData (primarySwatch: Colors.deepPurple), главная: Scaffold (appBar: AppBar (title: Text ('Long List App')), body: Column (children:  [Контейнер (поле: EdgeInsets.all (10.0), дочерний элемент: RaisedButton (цвет: Theme.of (context) .primaryColor, splashColor: Colors.blueGrey, textColor: Цвета). белый, onPressed: () {setState (() {_products.add ('Ноутбук');});  }, child: Text ('MacBook'))), Expanded (child: Products (_products))])));  }} 

Здесь мы использовали расширенный виджет . Это позволяет нам расширять дочерний элемент строки, столбца или гибкого графика. При использовании расширенного виджета дочерний элемент строки, столбца или гибкого элемента расширяется, чтобы заполнить доступное пространство на основной оси (например, по горизонтали для строки или по вертикали для столбца). Если несколько дочерних элементов расширяются, доступное пространство делится между ними в соответствии с коэффициентом гибкости.

Здесь мы передали импортированный конструктор Products с аргументом свойства _products массив.

Сохраните файл и перезапустите компиляцию с помощью сочетания клавиш R и теперь добавьте более 3 продуктов и видим, что теперь мы получаем идеальное прокручиваемое представление, и оно будет отображать продукт по запросу.

Это наиболее эффективный способ отображения длинного списка с помощью ListView , не используя ListView , но используя конструктор ListView.builder () .

Наконец, пример Flutter ListView завершен.

См. также

Как отображать изображение во Flutter

Вкладки Flutter

Создать виджет с отслеживанием состояния

Flutter навигация

Как написать виджет во Flutter