使用 GetX 過濾 Flutter 中的列表，where 和 contains 有效，但過濾掉的項目不會返回退格鍵

Question

我正在構建我的第一個 Flutter 應用程序，我正在嘗試使用 TextFormField 使用 GetX 過濾 Flutter 中的 TreeTypes 列表。

所以列表是從 API 中提取的，我想使用 TreeTypeController.filterTreeTypes(earchString) 方法實時過濾它。

它部分起作用。 不包含 searchString 的結果會像它們應該的那樣被過濾掉，但是當我在 searchString 上使用退格鍵時，刪除的項目不會放回列表中。

我知道我需要以某種方式克隆 filteredTreeTypeList 而不是過濾它然后用結果覆蓋它但我不知道該怎么做。 我嘗試使用 map 和我在互聯網上找到的其他方法創建一個新列表，但我一直遇到同樣的問題。

有人可以告訴我該怎么做嗎？ 謝謝！

下面是我的 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

在 controller 中聲明另一個列表：

List<TreeType> treeList = [];

並在您的 api 電話中對其進行初始化：

treeList = tree_types;

最后更新您的搜索 function：

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