使用 GetX 和 where 和 contains 过滤 Flutter 中的列表可以工作，但过滤掉的项目不会在退格键上返回

Question

我正在构建我的第一个 Flutter 应用程序，并尝试使用 TextFormField 通过 GetX 过滤 Flutter 中的 TreeType 列表。

因此列表是从 API 中提取的，我想使用 TreeTypeController.filterTreeTypes(eachString) 方法实时过滤它。

它有部分作用。不包含 searchString 的结果会像应有的那样被过滤掉，但是当我在 searchString 上使用退格键时，删除的项目不会放回列表中。

我知道我需要以某种方式克隆filteredTreeTypeList，而不是过滤它，然后用结果覆盖它，但我只是不知道如何做到这一点。我尝试使用地图和我在互联网上找到的其他方式创建一个新列表，但我不断遇到同样的问题。

有人可以告诉我该怎么做吗？谢谢！

下面是我的 GetxController 和我的视图/屏幕。

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:bonsai_care_app/services/tree_type_service.dart';
import 'package:bonsai_care_app/models/tree_type.dart';

class TreeTypeController extends GetxController {
  dynamic arguments = Get.arguments;
  var treeTypeList = <TreeType>[].obs;
  var isLoaded = true.obs;

  @override
  void onInit() {
    super.onInit();
    fetchAndSetTreeTypeList(arguments);
  }

  void filterTreeTypes(searchString) {
    var filteredTreeTypeList = [];
    filteredTreeTypeList = treeTypeList
        .where((element) =>
            element.name.toLowerCase().contains(searchString.toLowerCase()))
        .toList();
    print(filteredTreeTypeList.length);
    treeTypeList(filteredTreeTypeList);
  }

  Future<void> fetchAndSetTreeTypeList(arguments) async {
    debugPrint('TreeTypesController fetchTreeTypes()');
    try {
      isLoaded(false);
      var tree_types = await TreeTypeService().fetchTreeTypes(arguments);
      if (tree_types != null) {
        treeTypeList(tree_types);
      }
    } catch (error) {
      debugPrint(error);
      throw (error);
    } finally {
      isLoaded(true);
    }
  }
}

---

import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:bonsai_care_app/controllers/tree_type_controller.dart';
import 'package:bonsai_care_app/views/select_tree_type_details_screen.dart';

class SelectTreeTypeResultsScreen extends StatelessWidget {
  final TreeTypeController treeTypeController = Get.put(TreeTypeController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('select_tree_type_results__heading'.tr),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Obx(
            () {
              return Column(
                children: [
                  Container(
                    child: TextFormField(
                      onChanged: (query) {
                        treeTypeController.filterTreeTypes(query);
                      },
                      decoration: InputDecoration(
                        labelText:
                            'select_tree_type_results__search_input_label'.tr,
                        border: const OutlineInputBorder(),
                      ),
                    ),
                  ),
                  Container(
                    height: 500,
                    width: 200,
                    child: Visibility(
                      visible: treeTypeController.isLoaded.value,
                      replacement: Center(
                        child: CircularProgressIndicator(),
                      ),
                      child: treeTypeController.treeTypeList.length == 0
                          ? Center(
                              child: Text('no_results'.tr),
                            )
                          : ListView.builder(
                              itemCount: treeTypeController.treeTypeList.length,
                              itemBuilder: (context, index) {
                                return ListTile(
                                  title: Text(treeTypeController
                                      .treeTypeList[index].name),
                                  onTap: () {
                                    Get.to(() => SelectTreeTypeDetailsScreen(),
                                        arguments: treeTypeController
                                            .treeTypeList[index]);
                                  },
                                );
                              },
                            ),
                    ),
                  ),
                ],
              );
            },
          ),
        ],
      ),
    );
  }
}

Answer 1

在控制器中声明另一个列表：

List<TreeType> treeList = [];

并在您的 api 调用中初始化它：

treeList = tree_types;

最后更新你的搜索功能：

void filterTreeTypes(searchString) {
  treeTypeList.value = treeList
    .where((element) =>
        element.name.toLowerCase().contains(searchString.toLowerCase()))
    .toList();
}

Answer 2

同时更新 onChanged

onChanged: (query) {
                    treeTypeController.filterTreeTypes(query);
                    setState(() {});
                  },