颤动从列表视图和数据库中删除和更新项目

时间:2021-06-10 09:42:03

标签: flutter dart flutter-layout flutter-dependencies flutter-web

我想使用这样的滑动同时从列表视图和数据库中删除一个条目:

 onPressed: () {
      // Delete the item from DB 
      setState(() {
      data.indexOf(data[index]);
      data.removeAt(index);
      });
     Navigator.of(context).pop();
     },

该方法似乎不起作用,我也想知道如何在没有用户重新打开页面的情况下触发此页面上的更新。

return ListView.builder(
                      itemCount: snapshot.data.length,
                      itemBuilder: (context, index) {
                        List<Ia> data = snapshot.data;
                        print(data);
                        return Dismissible(
                          background: slideRightBackground(),
                          secondaryBackground: slideLeftBackground(),
                          key: Key(data[index].toString()),
                          // ignore: missing_return
                          confirmDismiss: (direction) async {
                            if (direction == DismissDirection.endToStart) {
                              final bool res = await showDialog(
                                  context: context,
                                  builder: (BuildContext context) {
                                    return AlertDialog(
                                      content: Text(
                                          "Are you sure you want to delete                                   `                                              ${data[index]}?"),`
                                      actions: <Widget>[
                                        // ignore: deprecated_member_use
                                        FlatButton(
                                          child: Text(
                                            "Cancel",
                                            style:
                                                TextStyle(color: Colors.black),
                                          ),
                                          onPressed: () {
                                            Navigator.of(context).pop();
                                          },
                                        ),
                                        FlatButton(
                                          child: Text(
                                            "Delete",
                                            style: TextStyle(color: Colors.red),
                                          ),
                                          onPressed: () {
                                            // Delete the item from DB 
                                            setState(() {
                                              data.indexOf(data[index]);
                                              data.removeAt(index);
                                            });
                                            Navigator.of(context).pop();
                                          },
                                        ),
                                      ],
                                    );
                                  });
                              return res;
                            } else {
                              // Navigate to edit page;
                            }
                          },
                          child: Card(
                            child: ListTile(
                              title: Text(data[index].name,
                                  style: TextStyle(fontSize: 16)),
                              subtitle: Row(
                                children: [
                                  Text(
                                    "Status",
                                    style: TextStyle(
                                        fontSize: 12,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  SizedBox(
                                    width: 5,
                                  ),
                                  Text(
                                    data[index].state,
                                    style: TextStyle(
                                      color: Colors.lightBlue,
                                      fontSize: 12,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      });

///////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// ///////////////////////////////////////////////// /////////////////

2 个答案:

答案 0 :(得分:0)

现在您只是将它从列表中删除,这是毫无意义的,因为流来自数据库。您只需要从数据库中删除它。 在您的 onPressed() 中,删除 setState() 并添加:

await _fireStoreInstance.runTransaction(
      (Transaction transaction) async {
        transaction.delete(YOUR_DOC_REF_HERE); // i'd assume data[index].reference
      },
    

答案 1 :(得分:0)

在关闭时调用 API 应该可以工作,如果您使用 api 从服务器数据库中删除数据,则需要调用删除函数

示例 UI 代码

class MyAppState extends State<MyApp> {
  final items = List<String>.generate(20, (i) => 'Item ${i + 1}');

  @override
  Widget build(BuildContext context) {
    final title = 'Dismissing Items';

    return MaterialApp(
      title: title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            final item = items[index];
            return Dismissible(
              key: Key(item),
              
              // what to do after an item has been swiped away.
              onDismissed: (direction) {
                // Remove the item from the data source.
                setState(() {
                 Deletedata(pass your id here);
                  items.removeAt(index);
                });

                // Then show a snackbar.
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('$item deleted')));
              },
              // Show a red background as the item is swiped away.
              background: Container(color: Colors.red),
              child: ListTile(title: Text('$item')),
            );
          },
        ),
      ),
    );
  }
}

删除函数

Future<void> Deletedata(String id) async{

var response = await http.delete(Uri.parse("http://xxx.xx.xx.xx/api/delete_route/$id"), headers: {'Content-Type': 'application/json;charset=UTF-8', 'Charset': 'utf-8', 'Authorization': 'token',},);
      print('Response status: ${response.statusCode}');
      print('Response body: ${response.body}');
}