Нумерация строк
Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 7 из 33.
index, который получает построитель, нужен не только для того, чтобы найти нужную песню. Это позиция строки в списке, поэтому её можно отображать.
itemBuilder: (context, index) {
return ListTile(
leading: Text('$index'),
title: Text(songs[index]),
);
},Рядом с первой песней отображается 0, потому что в Dart счёт начинается с 0. Люди считают с 1, поэтому показывай index + 1. Вычисление внутри строки записывается в фигурных скобках: '${index + 1}'.
Задание
ЛегкоПронумеруй песни: добавь каждому ListTile leading: CircleAvatar с номером песни, начиная с 1 для Morning Light.
Попробуйте сами
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
final List<String> songs = [
'Morning Light',
'Paper Planes',
'City Rain',
'Slow River',
'Neon Nights',
'Golden Hour',
'Northern Wind',
'Blue Harbor',
'Quiet Storm',
'Summer Static',
'Echo Valley',
'Last Train',
'Silver Lines',
'Open Road',
'Starfall',
];
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Playlist')),
body: ListView.builder(
itemCount: songs.length,
itemBuilder: (context, index) {
return ListTile(title: Text(songs[index]));
},
),
),
);
}
}
В этом уроке есть небольшой тест. Начните урок, чтобы ответить на вопросы и сохранить прогресс.
Все уроки раздела Списки и экраны
1Прокручиваемые списки
Список с прокруткойЭлементы спискаНачало и конецНажатие на элемент спискаРазделители между строками6Вкладки, боковые панели и свайпы
Вкладки с панелью навигацииЗаливные значки для открытой вкладкиБоковая панельУдаление свайпомОтмена свайпаПотренируйтесь самостоятельно: Онлайн-компилятор Flutter