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

Метод 1: ListView.builder()

Виджет ListView.builder() во Flutter позволяет нам эффективно создавать динамические списки. Чтобы создать упорядоченный список, мы можем использовать параметр itemBuilder и индекс элемента для отображения числа.

ListView.builder(
  itemCount: list.length,
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: Text('${index + 1}.'),
      title: Text(list[index]),
    );
  },
)

Метод 2: ListView.separated()

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

ListView.separated(
  itemCount: list.length,
  separatorBuilder: (BuildContext context, int index) => Divider(),
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      leading: Text('${index + 1}.'),
      title: Text(list[index]),
    );
  },
)

Метод 3: столбец с ListTile()

Мы также можем использовать виджет «Столбец» вместе с ListTile для создания упорядоченного списка. Обернув каждый ListTile столбцом, мы можем добиться нумерации.

Column(
  children: List.generate(
    list.length,
    (index) => ListTile(
      leading: Text('${index + 1}.'),
      title: Text(list[index]),
    ),
  ),
)

Метод 4: RichText с TextSpan()

Другой подход — использовать RichText вместе с TextSpan. Мы можем динамически генерировать TextSpans для каждого элемента, включая номер.

RichText(
  text: TextSpan(
    children: List.generate(
      list.length,
      (index) => TextSpan(
        text: '${index + 1}. ${list[index]}\n',
        style: DefaultTextStyle.of(context).style,
      ),
    ),
  ),
)

Метод 5: ListView и ListTile с помощью ListTile.divideTiles()

Используя метод divTiles() класса ListTile, мы можем получить упорядоченный список с разделителями.

ListView(
  children: ListTile.divideTiles(
    context: context,
    tiles: List.generate(
      list.length,
      (index) => ListTile(
        leading: Text('${index + 1}.'),
        title: Text(list[index]),
      ),
    ),
  ).toList(),
)

В этой статье мы рассмотрели несколько методов создания упорядоченных/нумерованных списков во Flutter. Мы рассмотрели подходы ListView.builder(), ListView.separated(), Column с ListTile(), RichText с TextSpan(), а также ListView и ListTile с ListTile.divideTiles(). Вы можете выбрать метод, который лучше всего соответствует вашим требованиям и дизайнерским предпочтениям.

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