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

最佳答案

我不确定您是否在询问功能逻辑或/和 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(),
           ] ),
      ),

      );
  }
}

关于dart - 像 whatsapp Flutter 一样编辑列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49807813/