如何使用弹出菜单删除项目列表 - flutter
how to delete item list using pop up menu - flutter
如何在单击弹出菜单按钮时删除项目列表?但是,我的列表和弹出菜单位于两个单独的文件中。我需要知道我根据哪个列表项删除了哪个。
pop_up_menu.dart:
import 'package:flutter/material.dart';
class PopUpMenu extends StatelessWidget {
void showMenuSelection(String value) {
print("pressed");
}
@override
Widget build(BuildContext context) {
return PopupMenuButton<String>(
padding: EdgeInsets.zero,
icon: Icon(Icons.more_vert),
onSelected: showMenuSelection,
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'Create another',
child: ListTile(
leading: Icon(Icons.add), title: Text('Create another'))),
const PopupMenuItem<String>(
value: 'Delete',
child: ListTile(
leading: Icon(Icons.delete), title: Text('Delete')))
],
);
}
}
所以在list_tile.dart中导入了这个弹出菜单,每当我点击弹出菜单按钮时,'Delete',我需要删除按下弹出菜单的选定列表项
List_tile.dart:
import 'package:flutter/material.dart';
import '../pop_up_menu/pop_up_menu.dart';
var levelsData = [];
class ListTile extends StatefulWidget {
@override
ListTileState createState() => new ListTileState();
}
class ListTileState extends State<ListTile> {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (BuildContext context, int index) => Card(
child: SingleChildScrollView(
child: StuffInTiles(
levelsData[index]['user_id'],
levelsData[index]['price'],
),
),
),
itemCount: levelsData.length,
);
}
}
class StuffInTiles extends StatelessWidget {
final String userId;
final double price;
StuffInTiles(this.userId, this.price);
@override
Widget build(BuildContext context) {
List<dynamic> _getChildren() {
List<Widget> children = [];
levelsData.forEach(
(element) {
if (price.toString() == element['price'].toString()) {
children.add(ListTile(
title: Text("@" + element['price'].toString(),
style: TextStyle(color: Colors.lightGreen)),
subtitle: Text(
"Created on 01 Jun 2018 at 06:24AM \n when price was " +
element['price'].toString()),
trailing: PopUpMenu()));
}
},
);
return children;
}
}
}
所以此列表中的每个项目都有一个弹出菜单,其中包含删除选项。当按下删除选项时,它必须删除触发它的项目。
示例:当按下用户2的删除弹出菜单按钮时,应该删除用户2。
为您的 PopUpMenu
添加回调函数 class:
class PopUpMenu extends StatelessWidget {
VoidCallback onDelete;
PopUpMenu({this.onDelete});
void showMenuSelection(String value) {
switch (value) {
case 'Delete':
onDelete();
break;
// Other cases for other menu options
}
}
然后在您原来的 class 中创建它时:
...
trailing: PopUpMenu(
onDelete: () {
levelsData.removeWhere((element) => element == element);
}
)));
}
Flutter 中的一般经验法则是将回调传递给子级而不是尝试访问父级中的数据。
您可能还需要使您的 StuffInTiles
小部件有状态并将 setState(() {});
添加到您的 onDelete
,因为简单地删除该值实际上不会使用新列表更新您的视图.
如何在单击弹出菜单按钮时删除项目列表?但是,我的列表和弹出菜单位于两个单独的文件中。我需要知道我根据哪个列表项删除了哪个。
pop_up_menu.dart:
import 'package:flutter/material.dart';
class PopUpMenu extends StatelessWidget {
void showMenuSelection(String value) {
print("pressed");
}
@override
Widget build(BuildContext context) {
return PopupMenuButton<String>(
padding: EdgeInsets.zero,
icon: Icon(Icons.more_vert),
onSelected: showMenuSelection,
itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
const PopupMenuItem<String>(
value: 'Create another',
child: ListTile(
leading: Icon(Icons.add), title: Text('Create another'))),
const PopupMenuItem<String>(
value: 'Delete',
child: ListTile(
leading: Icon(Icons.delete), title: Text('Delete')))
],
);
}
}
所以在list_tile.dart中导入了这个弹出菜单,每当我点击弹出菜单按钮时,'Delete',我需要删除按下弹出菜单的选定列表项
List_tile.dart:
import 'package:flutter/material.dart';
import '../pop_up_menu/pop_up_menu.dart';
var levelsData = [];
class ListTile extends StatefulWidget {
@override
ListTileState createState() => new ListTileState();
}
class ListTileState extends State<ListTile> {
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: (BuildContext context, int index) => Card(
child: SingleChildScrollView(
child: StuffInTiles(
levelsData[index]['user_id'],
levelsData[index]['price'],
),
),
),
itemCount: levelsData.length,
);
}
}
class StuffInTiles extends StatelessWidget {
final String userId;
final double price;
StuffInTiles(this.userId, this.price);
@override
Widget build(BuildContext context) {
List<dynamic> _getChildren() {
List<Widget> children = [];
levelsData.forEach(
(element) {
if (price.toString() == element['price'].toString()) {
children.add(ListTile(
title: Text("@" + element['price'].toString(),
style: TextStyle(color: Colors.lightGreen)),
subtitle: Text(
"Created on 01 Jun 2018 at 06:24AM \n when price was " +
element['price'].toString()),
trailing: PopUpMenu()));
}
},
);
return children;
}
}
}
所以此列表中的每个项目都有一个弹出菜单,其中包含删除选项。当按下删除选项时,它必须删除触发它的项目。
示例:当按下用户2的删除弹出菜单按钮时,应该删除用户2。
为您的 PopUpMenu
添加回调函数 class:
class PopUpMenu extends StatelessWidget {
VoidCallback onDelete;
PopUpMenu({this.onDelete});
void showMenuSelection(String value) {
switch (value) {
case 'Delete':
onDelete();
break;
// Other cases for other menu options
}
}
然后在您原来的 class 中创建它时:
...
trailing: PopUpMenu(
onDelete: () {
levelsData.removeWhere((element) => element == element);
}
)));
}
Flutter 中的一般经验法则是将回调传递给子级而不是尝试访问父级中的数据。
您可能还需要使您的 StuffInTiles
小部件有状态并将 setState(() {});
添加到您的 onDelete
,因为简单地删除该值实际上不会使用新列表更新您的视图.