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

Метод 1: ListView.builder с настраиваемым конструктором элементов

ListView.builder(
  itemCount: outerList.length,
  itemBuilder: (BuildContext context, int outerIndex) {
    return ListView.builder(
      shrinkWrap: true,
      physics: ClampingScrollPhysics(),
      itemCount: innerList.length,
      itemBuilder: (BuildContext context, int innerIndex) {
        return ListTile(
          title: Text(innerList[innerIndex]),
        );
      },
    );
  },
)

Этот метод предполагает использование двух виджетов ListView.builder: одного для внешнего списка, а другого для внутреннего списка. Установив для shrinkWrapзначение trueи используя ClampingScrollPhysics(), мы гарантируем, что внутренний список не будет прокручиваться независимо.

Метод 2: ListView внутри SingleChildScrollView

SingleChildScrollView(
  child: Column(
    children: [
      ListView.builder(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        itemCount: outerList.length,
        itemBuilder: (BuildContext context, int outerIndex) {
          return ListView.builder(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemCount: innerList.length,
            itemBuilder: (BuildContext context, int innerIndex) {
              return ListTile(
                title: Text(innerList[innerIndex]),
              );
            },
          );
        },
      ),
    ],
  ),
)

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

Метод 3: собственный ScrollView и SliverList

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int outerIndex) {
          return ListView.builder(
            shrinkWrap: true,
            physics: ClampingScrollPhysics(),
            itemCount: innerList.length,
            itemBuilder: (BuildContext context, int innerIndex) {
              return ListTile(
                title: Text(innerList[innerIndex]),
              );
            },
          );
        },
        childCount: outerList.length,
      ),
    ),
  ],
)

Этот метод использует CustomScrollView с SliverList. SliverChildBuilderDelegate позволяет нам динамически создавать внешний ListView. Внутренний ListView остается таким же, как и в предыдущих методах.

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

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