如何实施滑动以删除列表视图以从Firestore中删除数据 [英] How to implement a swipe to delete listview to remove data from firestore
问题描述
我对扑镖和飞镖很陌生,所以这可能是一个基本问题.但是,我想知道的是如何在列表视图中实现滑动删除方法以从Firestore中删除数据.
我尝试使用Dissmissible函数,但是我不了解如何显示列表,而且我似乎也无法理解如何删除所选数据.
这是我的飞镖代码
Widget build(BuildContext context){返回新的脚手架(resizeToAvoidBottomPadding:否,appBar:新的AppBar(centerTitle:正确,automaticImplyLeading:否,标题:行(mainAxisAlignment:MainAxisAlignment.spaceBetween,子项:< Widget> [Text("INVENTORY",textAlign:TextAlign.center,),新的IconButton(图标:图标(Icons.home,颜色:黑色.),onPressed:(){Navigator.push(语境,SlideLeftRoute(widget:MyHomePage()),);})]),),正文:ListPage(),);}}ListPage类扩展StatefulWidget {@override_ListPageState createState()=>_ListPageState();}类_ListPageState扩展了State< ListPage>{未来的getPosts()异步{var firestore = Firestore.instance;QuerySnapshot gn =等待firestore.collection(库存").orderBy(名称",降序:false).getDocuments();返回gn.documents;}@override窗口小部件build(BuildContext context){返回容器(子代:FutureBuilder(未来:getPosts(),生成器:(_,快照){if(snapshot.connectionState == ConnectionState.waiting){退货中心(子级:Text("Loading"),);}别的{返回ListView.builder(itemCount:snapshot.data.length,itemBuilder:(_,索引){返回EachList(snapshot.data [index] .data ["Name"].toString(),snapshot.data [index] .data ["Quantity"]);});}}),);}}class EachList扩展StatelessWidget {最终的String详细信息;最终的字符串名称;EachList(this.name,this.details);@override窗口小部件build(BuildContext context){//TODO:实现构建退回新卡(孩子:新货柜(填充:EdgeInsets.all(8.0),子级:新行(mainAxisAlignment:MainAxisAlignment.spaceBetween,子代:< Widget> [新行(子代:< Widget> [new CircleAvatar(child:new Text(name [0] .toUpperCase())),新的填充(padding:EdgeInsets.all(10.0)),新的Text(名称,样式:TextStyle(fontSize:20.0),),],),新的Text(详细信息,样式:TextStyle(fontSize:20.0))],),),);}}
您应该使用Dismissible小部件.我将其用于从Firestore检索的收件箱列表.在您的EachList内返回类似这样的内容
返回可撤销(方向:DismissDirection.startToEnd,resizeDuration:持续时间(毫秒:200),键:ObjectKey(snapshot.documents.elementAt(index)),onDismissed :(方向){//TODO:实现删除功能,并在需要时检查方向_deleteMessage(index);},背景:容器(填充:EdgeInsets.only(左:28.0),对齐方式:AlignmentDirectional.centerStart,颜色:Colors.red,子代:Icon(Icons.delete_forever,颜色:Colors.white,),),//secondaryBackground:...,孩子: ...,);});
重要提示:要删除列表项,您还需要从快照列表中删除该项,而不仅是从firestore中删除:
_deleteMessage(index){//TODO:此处从Firestore中删除,然后更新您的本地快照列表setState((){snapshot.documents.removeAt(index);});}
此处是文档:执行滑动以关闭
下面是Flutter团队的视频:本周小部件-Dismissilbe >
Im very new to flutter and dart so this might be a basic question. However, what I would like to know is how to implement a swipe to delete method in a listview to delete data from firestore too.
I tried using the Dissmissible function but i dont understand how to display the list and I cant seem to understand how to remove the selected data as well.
This here is my dart code
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
appBar: new AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
title: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children:
<Widget>[
Text("INVENTORY",textAlign: TextAlign.center,) ,new IconButton(
icon: Icon(
Icons.home,
color: Colors.black,
),
onPressed: () {
Navigator.push(
context,
SlideLeftRoute(widget: MyHomePage()),
);
})]),
),body: ListPage(),
);
}
}
class ListPage extends StatefulWidget {
@override
_ListPageState createState() => _ListPageState();
}
class _ListPageState extends State<ListPage> {
Future getPosts() async{
var firestore = Firestore.instance;
QuerySnapshot gn = await
firestore.collection("Inventory").orderBy("Name",descending:
false).getDocuments();
return gn.documents;
}
@override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: getPosts(),
builder: (_, snapshot){
if(snapshot.connectionState == ConnectionState.waiting){
return Center(
child: Text("Loading"),
);
}else{
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder:(_, index){
return EachList(snapshot.data[index].data["Name"].toString(),
snapshot.data[index].data["Quantity"]);
});
}
}),
);
}
}
class EachList extends StatelessWidget{
final String details;
final String name;
EachList(this.name, this.details);
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Card(
child:new Container(
padding: EdgeInsets.all(8.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new Row(
children: <Widget>[
new CircleAvatar(child: new Text(name[0].toUpperCase()),),
new Padding(padding: EdgeInsets.all(10.0)),
new Text(name, style: TextStyle(fontSize: 20.0),),
],
),
new Text(details, style: TextStyle(fontSize: 20.0))
],
),
),
);
}
}
You should use Dismissible widget. I used it for an inbox list retrieved from Firestore. Inside your EachList return something like this
return Dismissible(
direction: DismissDirection.startToEnd,
resizeDuration: Duration(milliseconds: 200),
key: ObjectKey(snapshot.documents.elementAt(index)),
onDismissed: (direction) {
// TODO: implement your delete function and check direction if needed
_deleteMessage(index);
},
background: Container(
padding: EdgeInsets.only(left: 28.0),
alignment: AlignmentDirectional.centerStart,
color: Colors.red,
child: Icon(Icons.delete_forever, color: Colors.white,),
),
// secondaryBackground: ...,
child: ...,
);
});
IMPORTANT: in order to remove the list item you'll need to remove the item from the snapshot list as well, not only from firestore:
_deleteMessage(index){
// TODO: here remove from Firestore, then update your local snapshot list
setState(() {
snapshot.documents.removeAt(index);
});
}
Here the doc: Implement Swipe to Dismiss
And here a video by Flutter team: Widget of the week - Dismissilbe
这篇关于如何实施滑动以删除列表视图以从Firestore中删除数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!