Создание горизонтального ListView во Flutter: несколько методов с примерами кода

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

Метод 1: использование виджета ListView.builder
Виджет ListView.builder во Flutter позволяет вам создавать список динамически на основе предопределенного количества списков. Чтобы создать горизонтальный ListView с помощью этого метода, вам необходимо установить для свойства scrollDirectionListView.builder значение Axis.horizontal.

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: itemCount,
  itemBuilder: (BuildContext context, int index) {
    return // Your item widget here
  },
)

Метод 2: использование виджета ListView.custom
Виджет ListView.custom обеспечивает более гибкий способ создания пользовательских представлений списков. Чтобы создать горизонтальный ListView с помощью этого метода, вам необходимо установить для свойства scrollDirectionListView.custom значение Axis.horizontal.

ListView.custom(
  scrollDirection: Axis.horizontal,
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return // Your item widget here
    },
    childCount: itemCount,
  ),
)

Метод 3: использование ListView.builder с SingleChildScrollView
В некоторых случаях вам может потребоваться иметь дополнительные виджеты, окружающие горизонтальный ListView. Этого можно добиться, обернув виджет ListView.builder в SingleChildScrollView и установив для свойства scrollDirectionListView.builder значение Axis.horizontal.

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: itemCount,
    itemBuilder: (BuildContext context, int index) {
      return // Your item widget here
    },
  ),
)

Метод 4: использование виджетов ListView и Row.
Другой подход к созданию горизонтального ListView заключается в объединении виджетов ListView и Row. Каждый элемент в списке может быть представлен как виджет внутри виджета «Строка».

ListView(
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Row(
      children: <Widget>[
        // Your item widgets here
      ],
    ),
  ],
)

В этом уроке мы рассмотрели несколько методов создания горизонтального ListView во Flutter. Вы можете выбрать метод, который соответствует вашим конкретным требованиям, и реализовать его в своем приложении Flutter. Виджеты ListView.builder и ListView.custom обеспечивают прямую поддержку горизонтальной прокрутки, а упаковка ListView.builder с помощью SingleChildScrollView или использование комбинации виджетов ListView и Row обеспечивают дополнительную гибкость. Приятного кодирования!