时间戳

首页 > 解决方案 > 如何从 Firebase 中删除颤动的卡片？

android - 如何从 Firebase 中删除颤动的卡片？

问题描述

我正在构建一个应用程序，在其中列出即将到来的足球比赛卡片，并将比赛存储在 Firebase 中。卡片上有一个删除按钮，它会弹出一个要求删除确认的弹出窗口。我如何不仅可以从列表中删除该卡，还可以从 Firebase 中删除该卡。这是卡的代码：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:foci_dev/model/next_matches.dart';
import 'package:foci_dev/pages/delete_page.dart';
import 'package:foci_dev/service/database_service.dart';

class DeleteCard extends StatelessWidget {
  final UpcomingMatch nextMatch;
  final cardId;
  DeleteCard(this.nextMatch, this.cardId);
  final DatabaseService _db = new DatabaseService(Firestore.instance);
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
        color: Colors.grey[900],
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            Text(
              "${nextMatch.upcomingTeam1}",
              style: TextStyle(color: Colors.white60),
            ),
            Text(
              '-',
              style: TextStyle(color: Colors.white60),
            ),
            Text(
              "${nextMatch.upcomingTeam2}",
              style: TextStyle(color: Colors.white60),
            ),
            IconButton(
              icon: Icon(Icons.delete),
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text(
                          'Biztos?',
                          style: TextStyle(color: Colors.red),
                        ),
                        content: Text("Ki akarod törölni a meccset?"),
                        actions: [
                          FlatButton(
                              onPressed: () {
                                Navigator.of(context).pop();
                              },
                              child: Text(
                                'Nem',
                                style: TextStyle(color: Colors.red),
                              )),
                          FlatButton(
                              onPressed: () {
                                deleteMatch(cardId);
                              },
                              child: Text(
                                'Igen',
                                style: TextStyle(color: Colors.green),
                              ))
                        ],
                      );
                    });
              },
              color: Colors.white60,
            )
          ],
        ),
      ),
    );
  }

  Future<void> deleteMatch(id) async {
    await Firestore.instance.collection("upcomings").document(id).delete();
  }
}

这是页面本身的代码：

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:foci_dev/model/next_matches.dart';
import 'package:foci_dev/pages/new_match_page.dart';
import 'package:foci_dev/service/database_service.dart';
import 'package:foci_dev/ui/delete_card.dart';

import 'main_page.dart';

class DeletePage extends StatefulWidget {
  @override
  _DeletePageState createState() => _DeletePageState();
  final DatabaseService databaseService;

  DeletePage(this.databaseService);
}

class _DeletePageState extends State<DeletePage> {
  DatabaseService _databaseService = DatabaseService(Firestore.instance);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[800],
      appBar: AppBar(
        backgroundColor: Colors.grey[900],
        centerTitle: true,
        title: const Text(
          'Foci-admin',
          style: TextStyle(color: Colors.white60),
        ),
        leading: Padding(
          padding: const EdgeInsets.all(8.0),
          child: IconButton(
            icon: Icon(
              Icons.edit,
              color: Colors.white60,
            ),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => NewMatch(this._databaseService),
                  ));
            },
            tooltip: 'Meccsek hozzáadása',
          ),
        ),
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: IconButton(
              icon: Icon(
                Icons.home,
                color: Colors.white60,
              ),
              onPressed: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => MainPage(),
                    ));
              },
              tooltip: 'Eredmény',
            ),
          )
        ],
      ),
      body: StreamBuilder(
        stream: Firestore.instance
            .collection("upcomings")
            .orderBy('createdAt')
            .snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return snapshot.hasData
              ? Container(
                  color: Colors.grey[850],
                  child: ListView.builder(
                      itemCount: snapshot.data.documents.length,
                      itemBuilder: (BuildContext context, int index) {
                        DocumentSnapshot upcomings =
                            snapshot.data.documents[index];
                        UpcomingMatch upcomingMatch = UpcomingMatch(
                            upcomings["upcomingTeam1"],
                            upcomings["upcomingTeam2"]);
                        return DeleteCard(upcomingMatch,
                            snapshot.data.documents[index].documentId);
                      }),
                )
              : Center(
                  child: CircularProgressIndicator(),
                );
        },
      ),
    );
  }
}

感谢您的帮助，我知道我应该展示我尝试过的代码，但我对 Flutter 和 Firebase 真的很陌生，我真的不知道如何开始。我唯一的想法是我需要以某种方式将文档 id 传递给 DeleteCard 类，但我被困在这里，因为我不知道该怎么做。

标签： androidfirebaseflutterdart

解决方案

cloud_firestore 版本 0.14.0+1 的答案

您可以将 snapshot.data.documents[index].id 或 snapshot.data.documents[index].documentID（对于旧版本）传递给 DeleteCard 小部件，然后使用它从 Firestore 中删除卡片。

DeleteCard(upcomingMatch , snapshot.data.documents[index].id)

                           OR

DeleteCard(upcomingMatch , snapshot.data.documents[index].documentID) // older version

DeleteCard 构造函数应如下所示

DeleteCard(this.nextMatch , this.cardId);

并从 AlertDialog 调用 deleteMatch(cardId) 得到确认

 Future<void> deleteMatch(id) async{
   await Firestore.instance.collection("upcomings").doc(id).delete();
                          
                            OR
   //older version
   await Firestore.instance.collection("upcomings").document(id).delete(); 

  }

推荐阅读