Во Flutter виджет ListView обычно используется для вертикального отображения списка элементов. Однако существуют сценарии, в которых вам может потребоваться создать горизонтальный ListView для представления данных в горизонтальном макете. В этом руководстве мы рассмотрим несколько методов создания горизонтального ListView во Flutter, а также приведем примеры кода.
Метод 1: использование виджета ListView.builder
Виджет ListView.builder во Flutter позволяет вам создавать список динамически на основе предопределенного количества списков. Чтобы создать горизонтальный ListView с помощью этого метода, вам необходимо установить для свойства scrollDirection
ListView.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 с помощью этого метода, вам необходимо установить для свойства scrollDirection
ListView.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 и установив для свойства scrollDirection
ListView.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 обеспечивают дополнительную гибкость. Приятного кодирования!