像 whatsapp Flutter 一样编辑列表
Edit list like whatsapp Flutter
如何在flutter中实现一个可以像whatsapp一样编辑的列表,我一直在寻找类似的控件,但只能找到ListView,基本上是删除或对listview项目进行任何操作
我不确定您是否也在询问 or/and 功能的逻辑以及 iOS 用户体验。
我想出了一个示例,可以帮助您开发功能。但是,正如您在下面看到的,我已经破坏了宇宙的所有设计指南。我不确定 Flutter 是否可以处理一个完全成熟的基于 Cupertino 的应用程序。 Flutter 提供的 Cupertino widgets 可能还不成熟,您可能需要从头开始设计 widgets。我在这里可能是错的,但无论如何我对 Flutter cupertino 小部件没有经验。
让我们回到这个例子!
注意终端的打印语句
这不是最漂亮的示例,我知道它有点乱,但如果您有任何问题,我会在这里。
class WhatsAppExample extends StatefulWidget {
@override
_WhatsAppExampleState createState() => new _WhatsAppExampleState();
}
class _WhatsAppExampleState extends State<WhatsAppExample> {
GlobalKey <ScaffoldState> key = new GlobalKey <ScaffoldState>();
List items ;
List selected= [];
bool edit = false;
@override
void initState(){
items= [
{"title":"message0","isChecked":false},
{"title":"message1","isChecked":false},
{"title":"message2","isChecked":false}
];
super.initState();
}
@override
Widget build(BuildContext context) {
return new CupertinoPageScaffold(
key:key ,
navigationBar: new CupertinoNavigationBar(
leading:!edit?new CupertinoButton(
child: new Text("Edit"),
onPressed:()=> setState((){
edit=true;
}),):new CupertinoButton(
child: new Text("Done"),
onPressed: ()=>setState((){edit=false;}),
),
middle: new Text("WhatsApp Example"),),
child: new Material(
child: new Stack(
children: [
new ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int i) { return new ListTile(
title: new Text(items[i]["title"]),
leading: edit? new Checkbox(
onChanged: (bool value) {
setState((){
this.items[i]["isChecked"] = value;
this.selected.add(i);
});
}, value: items[i]["isChecked"],):null,
);
},
),
edit?new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Container(
decoration: new BoxDecoration(
color: Colors.grey[200],
border: new Border.all(
color: Colors.grey[400]
)
),
alignment: FractionalOffset.bottomCenter,
height: 50.0,
child: new Padding(
padding: const EdgeInsets.all(15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text("Archive",),
new Text("Read"),
new Material(
child: new InkWell(
onTap:(){
print("Your list: $items");
for (int index in selected)
setState((){items.removeAt(index);});
print("Removed message$selected");
print ("Your list: $items");
} ,
child: new Text("Delete")),
)
],
),
)
),
],
):new Container(),
] ),
),
);
}
}
如何在flutter中实现一个可以像whatsapp一样编辑的列表,我一直在寻找类似的控件,但只能找到ListView,基本上是删除或对listview项目进行任何操作
我不确定您是否也在询问 or/and 功能的逻辑以及 iOS 用户体验。
我想出了一个示例,可以帮助您开发功能。但是,正如您在下面看到的,我已经破坏了宇宙的所有设计指南。我不确定 Flutter 是否可以处理一个完全成熟的基于 Cupertino 的应用程序。 Flutter 提供的 Cupertino widgets 可能还不成熟,您可能需要从头开始设计 widgets。我在这里可能是错的,但无论如何我对 Flutter cupertino 小部件没有经验。
让我们回到这个例子!
注意终端的打印语句
这不是最漂亮的示例,我知道它有点乱,但如果您有任何问题,我会在这里。
class WhatsAppExample extends StatefulWidget {
@override
_WhatsAppExampleState createState() => new _WhatsAppExampleState();
}
class _WhatsAppExampleState extends State<WhatsAppExample> {
GlobalKey <ScaffoldState> key = new GlobalKey <ScaffoldState>();
List items ;
List selected= [];
bool edit = false;
@override
void initState(){
items= [
{"title":"message0","isChecked":false},
{"title":"message1","isChecked":false},
{"title":"message2","isChecked":false}
];
super.initState();
}
@override
Widget build(BuildContext context) {
return new CupertinoPageScaffold(
key:key ,
navigationBar: new CupertinoNavigationBar(
leading:!edit?new CupertinoButton(
child: new Text("Edit"),
onPressed:()=> setState((){
edit=true;
}),):new CupertinoButton(
child: new Text("Done"),
onPressed: ()=>setState((){edit=false;}),
),
middle: new Text("WhatsApp Example"),),
child: new Material(
child: new Stack(
children: [
new ListView.builder(
itemCount: items.length,
itemBuilder: (BuildContext context, int i) { return new ListTile(
title: new Text(items[i]["title"]),
leading: edit? new Checkbox(
onChanged: (bool value) {
setState((){
this.items[i]["isChecked"] = value;
this.selected.add(i);
});
}, value: items[i]["isChecked"],):null,
);
},
),
edit?new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new Container(
decoration: new BoxDecoration(
color: Colors.grey[200],
border: new Border.all(
color: Colors.grey[400]
)
),
alignment: FractionalOffset.bottomCenter,
height: 50.0,
child: new Padding(
padding: const EdgeInsets.all(15.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Text("Archive",),
new Text("Read"),
new Material(
child: new InkWell(
onTap:(){
print("Your list: $items");
for (int index in selected)
setState((){items.removeAt(index);});
print("Removed message$selected");
print ("Your list: $items");
} ,
child: new Text("Delete")),
)
],
),
)
),
],
):new Container(),
] ),
),
);
}
}