使用GetX实现Flutter商品搜索控制器的技术求助

1. 补充响应式状态变量 #

现有代码缺少搜索结果、加载状态和错误信息的响应式管理，需要在CtrlSeproList中添加GetX响应式变量，让UI自动感知状态变化：

class CtrlSeproList extends GetxController {
  final seC = TextEditingController();
  // 响应式商品列表
  final RxList<MdlListpro> products = <MdlListpro>[].obs;
  // 加载状态标识
  final RxBool isLoading = false.obs;
  // 错误信息存储
  final RxString errorMessage = ''.obs;

  // 后续完善的搜索方法...
}

2. 完善搜索方法的状态控制 #

修改searchProduct方法，加入加载状态切换和错误捕获逻辑，确保状态同步更新：

Future<void> searchProduct(String query) async {
  // 空搜索词直接清空列表
  if (query.trim().isEmpty) {
    products.clear();
    errorMessage.value = '';
    return;
  }

  isLoading.value = true;
  errorMessage.value = '';

  try {
    final response = await http.get(
      Uri.parse('$be/products?search=$query&$ckCS'),
    );
    if (response.statusCode == 200) {
      products.value = mdlListproFromJson(response.body);
    } else {
      errorMessage.value = '搜索失败：服务器返回异常';
    }
  } catch (e) {
    errorMessage.value = '搜索失败：${e.toString()}';
  } finally {
    isLoading.value = false;
  }
}

3. 添加文本监听与防抖优化 #

避免用户输入时频繁触发接口请求，在控制器初始化阶段添加文本监听，并通过GetX的debounce实现防抖：

@override
void onInit() {
  super.onInit();
  // 监听搜索文本变化
  seC.addListener(() {
    // 500ms内无输入变化才执行搜索，减少无效请求
    debounce(
      seC.text,
      (query) => searchProduct(query),
      time: const Duration(milliseconds: 500),
    );
  });
}

@override
void onClose() {
  // 释放文本控制器，避免内存泄漏
  seC.dispose();
  super.onClose();
}

4. UI层状态绑定示例 #

在页面中使用Obx监听控制器状态，实现UI自动更新：

class SearchProductPage extends StatelessWidget {
  final CtrlSeproList controller = Get.put(CtrlSeproList());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('商品搜索')),
      body: Column(
        children: [
          // 搜索输入框
          TextField(
            controller: controller.seC,
            decoration: const InputDecoration(
              hintText: '输入商品名称搜索',
              prefixIcon: Icon(Icons.search),
              border: OutlineInputBorder(),
            ),
          ),
          // 状态与列表展示区
          Obx(() {
            if (controller.isLoading.value) {
              return const Padding(
                padding: EdgeInsets.all(16.0),
                child: CircularProgressIndicator(),
              );
            }
            if (controller.errorMessage.value.isNotEmpty) {
              return Padding(
                padding: const EdgeInsets.all(16.0),
                child: Text(
                  controller.errorMessage.value,
                  style: const TextStyle(color: Colors.red),
                ),
              );
            }
            // 商品列表渲染
            return Expanded(
              child: ListView.builder(
                itemCount: controller.products.length,
                itemBuilder: (context, index) {
                  final product = controller.products[index];
                  return ListTile(
                    title: Text(product.name),
                    subtitle: Text('¥${product.price}'),
                  );
                },
              ),
            );
          }),
        ],
      ),
    );
  }
}

关键注意点 #

• 防抖逻辑：减少短时间内的重复接口请求，降低服务器压力
• 资源清理：在onClose中释放TextEditingController，避免内存泄漏
• 空值处理：对空搜索词做特殊处理，提升用户体验
• 错误反馈：将错误信息直观展示给用户，避免无意义的空白状态

内容的提问来源于stack exchange，提问作者Maria Ulfa