我想在 Google Keep 中实现类似的东西。
如何在长按时启用多项选择并更改标题按钮,以便稍后删除那些选定的项目?
我当前的 Dart 代码:
@override
Widget build(BuildContext context) {
return new Card(
child: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
new ListTile(
leading: const Icon(Icons.info),
title: new Text(item.name),
subtitle: new Text(item.description),
trailing: new Text(item.dateTime.month.toString()),
onTap: () => _openEditDialog(context, item),
onLongPress: // what should I put here,
)
]),
);
}
当用户长按 ListTile 必须将所选属性更改为 true,反之亦然,并且卡片颜色必须更改为类似 Grey[300]
class cardy extends StatefulWidget {
@override
_cardyState createState() => new _cardyState();
}
class _cardyState extends State<cardy> {
var isSelected = false;
var mycolor=Colors.white;
@override
Widget build(BuildContext context) {
return new Card(
color: mycolor,
child: new Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
new ListTile(
selected: isSelected,
leading: const Icon(Icons.info),
title: new Text("Test"),
subtitle: new Text("Test Desc"),
trailing: new Text("3"),
onLongPress: toggleSelection // what should I put here,
)
]),
);
}
void toggleSelection() {
setState(() {
if (isSelected) {
mycolor=Colors.white;
isSelected = false;
} else {
mycolor=Colors.grey[300];
isSelected = true;
}
});
}
}
编辑:如果您想获得边框着色效果,请在容器内创建列并将装饰属性设置为变量并将其命名为border并编辑选择方法
void toggleSelection() {
setState(() {
if (isSelected) {
border=new BoxDecoration(border: new Border.all(color: Colors.white));
mycolor = Colors.white;
isSelected = false;
} else {
border=new BoxDecoration(border: new Border.all(color: Colors.grey));
mycolor = Colors.grey[300];
isSelected = true;
}
});
}
几天前我做了一个类似的实现。长按列表中的任何项目以激活选择,然后单击以选择。选择所需的项目后,点击删除按钮以从列表中删除所有选定的项目。
参考这个回购协议:https://github.com/acromondx/FlutterVortex/tree/main/multi_select