Flutter 列表条目点击收藏和取消收藏效果实现教程

要实现列表条目的点击收藏和取消收藏效果，你可以按照以下步骤进行：

在列表条目的数据模型中添加一个布尔类型的字段，用于表示该条目是否已被收藏。示例代码如下：

class ListItem {
  String title;
  String content;
  bool isFavorite;

  ListItem({required this.title, required this.content, this.isFavorite = false});
}

在列表项的 Widget 中，根据 isFavorite 字段来显示不同的收藏图标。示例代码如下：

class ListItemWidget extends StatelessWidget {
  final ListItem item;

  ListItemWidget({required this.item});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(item.title),
      subtitle: Text(item.content),
      leading: Icon(item.isFavorite ? Icons.favorite : Icons.favorite_border),
      onTap: () {
        // 点击时切换收藏状态
        item.isFavorite = !item.isFavorite;
      },
    );
  }
}

在列表的父组件中，使用 ListView.builder 来构建列表，并在 itemBuilder 中传入 ListItemWidget。示例代码如下：

class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
  List<ListItem> items = [
    ListItem(title: 'Item 1', content: 'Content 1'),
    ListItem(title: 'Item 2', content: 'Content 2'),
    ListItem(title: 'Item 3', content: 'Content 3'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListItemWidget(item: items[index]);
        },
      ),
    );
  }
}

这样，当你点击列表项时，收藏图标会根据 isFavorite 字段的状态进行切换。你可以在 onTap 回调中添加额外的逻辑，例如保存收藏状态到数据库或实现其他自定义行为。