如何在颤动的列表视图中增加每张卡片的索引？答案

【问题标题】：How to increment an index for each card in a listview in flutter?如何在颤动的列表视图中增加每张卡片的索引？
【发布时间】：2022-06-12 21:41:40
【问题描述】：

我从 Flutter 开始，并使用 Firestore 数据库进行处理，我有一个列表视图，它按我的收藏文档显示一张卡片，但我被困在删除按钮上。我想将它放入同一张卡片并使用一个索引，我在该索引上添加 +1 以删除文档，但我做不到。

我不知道我是否使用了好方法，我将有关卡片的部分代码和屏幕截图链接到这篇文章。

Screen capture

class _ArticleDataState extends State<ArticleData> {
  final index = 0;
  final Stream<QuerySnapshot> _usersStream = FirebaseFirestore.instance.collection('Article').snapshots();
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: _usersStream,
      builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          return const Text('Something went wrong');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Text("Loading");
        }

        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
            return Card(
            final index = index + 1,
            elevation: 3.0,
            margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
              child: Container(
              decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.surface),
              child: ListTile(
                  contentPadding: const EdgeInsets.symmetric(
                      horizontal: 20.0, vertical: 10.0),
                  title: Text(
                   data['name'],
                    style: TextStyle(
                        color: Theme.of(context).colorScheme.primary,
                        fontWeight: FontWeight.bold),
                  ),
                  subtitle: Wrap(
                    children: <Widget>[
                      Text(data["text"],
                          overflow: TextOverflow.ellipsis,
                          style: TextStyle(
                              color: Theme.of(context).colorScheme.secondary))
                    ],
                  ),
                  trailing: IconButton(
            icon: const Icon(FontAwesomeIcons.solidTrashCan,
                      color: Colors.blue, size: 25.0), onPressed: () {
                    FirebaseFirestore.instance.collection("Article").doc(snapshot.data!.docs[index].reference.id.toString()).delete().then(
                          (doc) => showDialog(
                            context: context,
                            builder: (BuildContext context) => _buildPopupDialog(context),
                          )
                    );
                  },
            ),
            ),
          ));
        },
          ).toList(),
        );
      },
    );
  }
}

【问题讨论】：

不要使用final作为索引，只使用index++
我需要保持第一个最终索引 = 0;而最终的index = index + 1，需要变成index++吗？

标签： flutter dart google-cloud-firestore

【解决方案1】：

不要使用 ListView，而是使用 ListView.builder 来处理索引。

标准的 ListView 构造函数适用于小列表。去工作对于包含大量项目的列表，最好使用 ListView.builder 构造函数。

与默认的 ListView 构造函数相反，它需要一次创建所有项目，ListView.builder() 构造函数创建项目滚动到屏幕上。 reference

所以将返回 listView 的位置更改为如下所示：

 return ListView.builder(
  itemCount: snapshot.data!.docs.length,
  itemBuilder: (BuildContext context, int index) {
    return Card(
      elevation: 3.0,
      margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration:
            BoxDecoration(color: Theme.of(context).colorScheme.surface),
        child: ListTile(
          contentPadding:
              const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
          title: Text(
            data['name'],
            style: TextStyle(
                color: Theme.of(context).colorScheme.primary,
                fontWeight: FontWeight.bold),
          ),
          subtitle: Wrap(
            children: <Widget>[
              Text(data["text"],
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                      color: Theme.of(context).colorScheme.secondary))
            ],
          ),
          trailing: IconButton(
            icon: const Icon(FontAwesomeIcons.solidTrashCan,
                color: Colors.blue, size: 25.0),
            onPressed: () {
              FirebaseFirestore.instance
                  .collection("Article")
                  .doc(snapshot.data!.docs[index].reference.id.toString())
                  .delete()
                  .then((doc) => showDialog(
                        context: context,
                        builder: (BuildContext context) =>
                            _buildPopupDialog(context),
                      ));
            },
          ),
        ),
      ),
    );
  },
);

【讨论】：