Ô danh sách

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 2 trên 33.

Hầu hết các hàng trong danh sách trông giống nhau: một dòng chính, đôi khi có thêm một dòng nhỏ hơn bên dưới, có thể có biểu tượng ở mỗi đầu. ListTile là hàng có sẵn như vậy, với kích thước và khoảng đệm phù hợp.

ListTile(
  title: Text('Ada Lovelace'),
  subtitle: Text('+1 555 0101'),
)

title là dòng chính. subtitle nằm bên dưới, nhỏ hơn và có màu nhạt hơn. Cả hai đều nhận một widget, thường là Text.

ListTile có chiều rộng bằng danh sách chứa nó và cao lên để vừa với hai dòng khi có phụ đề. Đặt vài mục như vậy trong ListView là bạn có một danh sách liên hệ.

Thử thách

Dễ

Hàng của Ada đã là một ListTile. Chuyển hai văn bản còn lại thành các ô giống như của cô ấy:

Alan Turing với phụ đề +1 555 0102
Grace Hopper với phụ đề +1 555 0103

Tự làm thử

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Contacts')),
        body: ListView(
          children: const [
            ListTile(
              title: Text('Ada Lovelace'),
              subtitle: Text('+1 555 0101'),
            ),
            Text('Alan Turing'),
            Text('Grace Hopper'),
          ],
        ),
      ),
    );
  }
}