Chạm vào một ô 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 4 trên 33.

Danh sách không chỉ để đọc: bạn chạm vào một hàng để chọn. ListTile có onTap:, một hàm (function) chạy khi bạn chạm vào hàng đó, tương tự như onPressed: của nút.

ListTile(
  title: Text(fruit),
  onTap: () {
    setState(() {
      picked = fruit;
    });
  },
)

Một ô có onTap: cũng hiển thị hiệu ứng gợn sóng khi bạn chạm vào, khiến nó có cảm giác như một nút.

Khi các ô được tạo bằng for, onTap của mỗi ô ghi nhớ fruit riêng. Chạm vào Kiwi sẽ chạy hàm của Kiwi, với fruit được đặt thành 'Kiwi'.

Thử thách

Dễ

Thanh ứng dụng hiển thị Pick a fruit. Thêm onTap: cho từng ô để khi bạn chạm vào một loại trái cây, thanh ứng dụng sẽ đổi thành You picked Mango (với loại trái cây bạn đã chạm vào).

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FruitPicker(),
    );
  }
}

class FruitPicker extends StatefulWidget {
  const FruitPicker({super.key});

  @override
  State<FruitPicker> createState() => _FruitPickerState();
}

class _FruitPickerState extends State<FruitPicker> {
  final List<String> fruits = ['Apple', 'Banana', 'Kiwi', 'Mango', 'Peach'];
  String picked = 'Pick a fruit';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(picked)),
      body: ListView(
        children: [
          for (String fruit in fruits)
            ListTile(
              title: Text(fruit),
            ),
        ],
      ),
    );
  }
}