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

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

ListView.builder(
  scrollDirection: Axis.horizontal,
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      width: 150.0,
      child: ListTile(
        title: Text(items[index]),
      ),
    );
  },
)

Метод 2: использование виджета ListView.custom
Если вам требуется больше контроля над макетом и настройкой горизонтального ListView, вы можете использовать виджет ListView.custom. Этот метод особенно полезен при работе со сложными или интерактивными элементами списка. Вот пример:

ListView.custom(
  scrollDirection: Axis.horizontal,
  childrenDelegate: SliverChildBuilderDelegate(
    (BuildContext context, int index) {
      return Container(
        width: 150.0,
        child: ListTile(
          title: Text(items[index]),
        ),
      );
    },
    childCount: items.length,
  ),
)

Метод 3: использование виджета SingleChildScrollView
Другой подход к созданию горизонтального ListView — использование виджета SingleChildScrollView. Этот виджет позволяет создать прокручиваемый контейнер, содержащий один дочерний элемент. Обернув список элементов внутри виджета «Строка», вы можете прокручивать его по горизонтали. Вот пример:

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: Row(
    children: items.map((item) {
      return Container(
        width: 150.0,
        child: ListTile(
          title: Text(item),
        ),
      );
    }).toList(),
  ),
)

Метод 4: реализация пользовательского виджета
Если ни один из встроенных виджетов не соответствует вашим требованиям, вы можете создать собственный виджет для получения горизонтального представления списка. Вы можете расширить класс StatelessWidget или StatefulWidget и реализовать собственную логику прокрутки. Вот упрощенный пример:

class HorizontalListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal,
      children: [
        // Your custom list items
      ],
    );
  }
}

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