Question

我是新手，我想从中删除选定的值   列表，但是我不知道如何删除所选项目，有人可以帮忙吗？

我在Appbar中使用了图标按钮，并尝试通过以下方式设置其中的setState   使用.removelast（）命令，但是我想选择项目   删除它。

代码：

class DemoPage extends State<MyHomePage> {
  TextEditingController Controller = TextEditingController();
  List<String> msg = List();



  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: Text('Demo_App'),
        actions: <Widget>[
          IconButton(icon: Icon(Icons.delete),
              onPressed: (){
                  setState(() {
                    msg.removeLast();
                  });
              }),
        ],
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            margin: EdgeInsets.only(right: 150.0,top: 10.0,left: 8.0),
            child:TextField(
                controller: Controller,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  hintText: 'please enter your name',
                ),
              ),

          ),
          Container(
            alignment: Alignment.topRight,
            margin: EdgeInsets.only(left: 250.0,right: 10.0),
            child: RaisedButton(
              onPressed: () {
                setState(() {
                  msg.add(Controller.text);
                  Controller.clear();
                });
              },
              child: Text('Add'),
            ),
          ),
          Expanded(
            flex: 2,
              child: Container(
                child: Card(
                  margin: EdgeInsets.all(8.0),
                  child: ListView.builder(
                    itemCount: msg.length,
                    itemBuilder: (context, index){
                      if(index.isInfinite){
                        return Divider();
                      }
                      return ListTile(
                        title: Text(msg[index]),
                      );
                    },),
                ),
              )),
        ],
      ),
    );
  }

}

我想选择数据，然后使用中的图标按钮将其删除 AppBar。

Answer 1

让我们假设您想通过单击选择项目。

单独创建一个列表indexList，每次选择一个项目时，都将单击的索引存储到indexList中。

然后，点击删除按钮，在indexList上运行一个循环，并使用存储的索引从itemList中删除项目。

干净indexList 更新您的状态

class DemoPage extends State<MyHomePage> {
  TextEditingController Controller = TextEditingController();
  List<String> msg = List();
  List<int> selectedItems = List();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build

    return Scaffold(
      appBar: AppBar(
        title: Text('Demo_App'),

    actions: <Widget>[
      IconButton(
          icon: Icon(Icons.delete),
          onPressed: () {
            setState(() {
              msg.removeLast();
            });
          }),
    ],
  ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        alignment: Alignment.topLeft,
        margin: EdgeInsets.only(right: 150.0, top: 10.0, left: 8.0),
        child: TextField(
          controller: Controller,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: 'please enter your name',
          ),
        ),
      ),
      Container(
        alignment: Alignment.topRight,
        margin: EdgeInsets.only(left: 250.0, right: 10.0),
        child: RaisedButton(
          onPressed: () {
            setState(() {
              msg.add(Controller.text);
              Controller.clear();
            });
          },
          child: Text('Add'),
        ),
      ),
      Expanded(
          flex: 2,
          child: Container(
            child: Card(
              margin: EdgeInsets.all(8.0),
              child: ListView.builder(
                  itemCount: msg.length,
                  itemBuilder: (context, index) {
                    return new GestureDetector(
                        onLongPress: () {
                          if(selectedItems.contains(index))
                            selectedItems.remove(index);
                          else
                            selectedItems.add(index);
                        },
                        onTap: () {
                          if(selectedItems.contains(index))
                            selectedItems.remove(index);
                          else
                            selectedItems.add(index);
                        },
                        child: index.isInfinite
                            ? Divider()
                            : ListTile(
                                title: Text(msg[index]),
                              ));
                  }),
            ),
          )),
    ],
  ),
);
  }

  void _deleteItems(){ // call _deleteItems() on clicking delete button

    setState(() {
      //set your state
      for (final index in selectedItems)
          msg.removeAt(index);
      selectedItems.clear();
    });
  }

}

Answer 2

您可以这样更改返回ListTile部分吗？

            return InkWell(onTap() => setState((){msg.removeAt(index)
              }), child:ListTile(
                    title: Text(msg[index]),
                  ),);

我想使用操作栏中的删除按钮从列表中删除所选数据

2 个答案: