点击列表项

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 4 课，共 33 课。

列表不只是用来阅读的内容：你可以点击某一行来选中它。ListTile 有一个 onTap:，这是一个在点击该行时运行的函数，和按钮的 onPressed: 是同样的思路。

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

带有 onTap: 的列表项在你触碰时还会显示涟漪效果，因此感觉就像一个按钮。

使用 for 循环创建列表项时，每个列表项的 onTap 都会记住自己的 fruit。点击 Kiwi 时会运行 Kiwi 对应的函数，此时 fruit 的值为 'Kiwi'。

挑战

简单

应用栏显示 Pick a fruit。为每个条目添加 onTap:，这样点击水果后，应用栏会变成 You picked Mango（其中显示你点击的水果）。

亲手试试

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