滑动删除

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

在邮件或购物应用中，你可以通过将某个条目滑出屏幕来清除它。用 Dismissible 包裹这一行：

Dismissible(
  key: ValueKey(item),
  onDismissed: (direction) {
    setState(() {
      items.remove(item);
    });
  },
  child: ListTile(title: Text(item)),
)

这一行会在你的手指下滑走。它消失后，onDismissed 会运行，你需要在 setState 中从列表里移除这个条目。如果不这样做，列表中仍然会有它，Flutter 会报错停止运行：被移除的这一行仍在列表中。

key 用来告诉 Flutter 每一行对应哪个条目，因此每一行的键都必须不同：ValueKey(item) 使用条目本身作为键。

items 是 final，但你仍然可以从中移除条目：final 表示变量始终指向同一个列表，并不表示列表永远不会变化。

挑战

简单

应用栏会统计项目数量。让购物列表支持滑动删除：将每个 ListTile 包在 Dismissible 中，并将 ValueKey(item) 设为其键；滑走项目时，从 items 中移除该项目。

亲手试试

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: HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final List<String> items = ['Milk', 'Bread', 'Eggs', 'Apples', 'Cheese'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${items.length} items')),
      body: ListView(
        children: [
          for (String item in items)
            ListTile(title: Text(item)),
        ],
      ),
    );
  }
}