删除项目后刷新列表 - Flutter

Question

我试图让列表在按下弹出菜单上的删除选项后自动刷新。它将从 api 调用的项目列表中删除所选项目。按下删除按钮后，该项目应立即消失。

使用 api 数据填充列表的 API 调用：

  List data;

  @override
  void initState() {
    super.initState();
    this.getJsonData();
  }

  Future<String> getJsonData() async {
    var response = await http.get(
      Uri.encodeFull(url),
      headers: {"Accept": "application/json"},
    );

    var extractdata = json.decode(response.body);
    data = extractdata['levels'];
    levelsData = data;

    setState(
      () {
        var extractdata = json.decode(response.body);
        data = extractdata['levels'];
      },
    );
    return "Success";
  }

...

删除的API调用：

  delete() async {
    String url = "http://31.183.125.253:8080/users";

    Map map = {
      'price': 1.23,
      'user_id': 'user2'
    };

    print(await apiRequest(url, map));
  }

  Future<String> apiRequest(String url, Map jsonMap) async {
    HttpClient httpClient = new HttpClient();
    HttpClientRequest request = await httpClient.deleteUrl(Uri.parse(url));
    request.headers.set('content-type', 'application/json');
    request.add(utf8.encode(json.encode(jsonMap)));
    HttpClientResponse response = await request.close();
    String statusCode = response.statusCode.toString();
    String reply = await response.transform(utf8.decoder).join();

    print(statusCode);

    httpClient.close();
    return reply;
  }

存储来自 api 调用的列表的扩展图块：

...

var levelsData = [];

  @override
  Widget build(BuildContext context) {
    List<dynamic> _getChildren() {
      List<Widget> children = [];
      levelsData.forEach(
        (element) {
            children.add(
              ListTile(
                title: Text(element['price'].toString(),
                trailing: PopUpMenu(
                  onDelete: () {
                    setState(() {
                      delete();
                    });
                  }))
            );}
      );
      return children;
    }
  }

...

弹出菜单：

class PopUpMenu extends StatelessWidget {
  VoidCallback onDelete;

  PopUpMenu({this.onDelete});

  void showMenuSelection(String value) {
    switch (value) {
      case 'Delete':
        onDelete();
        break;
      // Other cases for other menu options
    }
  }

我可以删除选择要删除的项目，但该项目不会从列表中消失，也不会显示列表的更改。

Answer 1

Flutter 应自动更新以反映数据源的更改。但是，这仅在调用后应用：

setState((){

});

因此，应该在从列表中删除该项目后运行该命令。

Answer 2

您必须调用 setState 并将该项目从列表中删除。

     class _MyListViewState extends State<MyListView> {
          MyDB _myDB;
          List<MyItem> _myList;

        ...

      void getData() async {
        ...

        _myDB.getData().then((items) {
          setState(() {
            _myList = items;
          });
        });
      }

      @override
      void initState() {
        super.initState();
        getData();
      }

              @override
              Widget build(BuildContext context) {
                return (_myList== null || _myList.isEmpty)
                    ? Center(child: Text('Nothing to see...'))
                    : ListView.builder(
                        itemCount: _myList.length,
                        itemBuilder: (context, index) {
                          return

        ... onPress ...

                _myDB.deleteItem(_myList[index]).whenComplete(() {
                                                setState(() {
                                                  _myList.removeAt(index);
                                                });
                                              });