dart - 像whatsapp Flutter一样编辑列表

Question

如何在flutter中实现一个可以像whatsapp一样编辑的列表，我一直在寻找类似的控件，但只能找到ListView，基本上想法是在listview项目中删除或采取任何操作

Answer 1

我不确定您是否也在询问功能的逻辑或/和 iOS 用户体验。

我提出了一个可以帮助您开发功能的示例。然而，正如你在下面看到的，我已经扼杀了宇宙的所有设计准则。我不确定 Flutter 是否可以处理一个成熟的基于 Cupertino 的应用程序。Flutter 提供的 Cupertino 小部件可能还不成熟，您可能必须从头开始设计小部件。我在这里可能错了，但无论如何我对 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(),
           ] ),
      ),

      );
  }
}