행에 번호 매기기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 7번째.

빌더가 받는 index는 올바른 곡을 찾기 위한 방법일 뿐만 아니라, 목록에서 행이 놓인 위치이므로 화면에 표시할 수도 있습니다.

itemBuilder: (context, index) {
  return ListTile(
    leading: Text('$index'),
    title: Text(songs[index]),
  );
},

Dart에서는 0부터 세기 때문에 첫 번째 곡 옆에 0이 표시됩니다. 사람들은 1부터 세므로 index + 1을 표시하세요. 문자열 안의 계산식은 중괄호로 감쌉니다: '${index + 1}'.

챌린지

쉬움

노래에 번호를 매기세요. 각 ListTile의 leading:에 곡 번호를 표시하는 CircleAvatar를 넣고, Morning Light의 번호는 1부터 시작하세요.

직접 해보기

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]));
          },
        ),
      ),
    );
  }
}