使用 GetX 进行 Flutter 产品搜索

Question

我在创建产品搜索控制器时遇到困难。谁能帮我提供一个概述吗？

class CtrlSeproList extends GetxController {
  final seC = TextEditingController();

  Future<List<MdlListpro>> searchProduct(query) async {
    final response = await http.get(
      Uri.parse('$be/products?search=$query&$ckCS'),
    );
    if (response.statusCode == 200) {
      return mdlListproFromJson(response.body);
    } else {
      throw Exception('Error: Search Product');
    }
  }
}

对于结果，我希望能够使用 GetX 的产品搜索功能。

Answer 1

您需要如下所示的东西。这只是一个概述，您需要正确实施。

class SearchResult {
  String url;
  String title;
  String description;
  SearchResult({required this.url, required this.title, required  this.description});
}

class SearchService {
  Future<List<SearchResult>> searchProducts (String query) async{
     //implement
  }
}

class SearchController extends GetxController {
  
     RxList<SearchResult> searchState = <SearchResult>[].obs;

     SearchService searchService; 

     SearchController ({required this.searchService});

     void search (String query) async {
        searchState.value = await searchService.searchProducts(query);
        searchState.refresh();
     }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final searchController = Get.put(SearchController(searchService: SearchService()));

    //implement text field and button
    //in button event handler put: 
    searchController.search('<take value from text field>');
  }

}

class SearchResultsScreen extends StatelessWidget{

  final searchController = Get.find<SearchController>();

  @override
  Widget build(BuildContext context) {
    //implement Obx with ListView like below: 

    child: Obx(
                        () =>ListView.builder(
                  itemCount: searchController.searchState.length,
                  itemBuilder: (_, index) {
                    return Row
                    (
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                         
                        Expanded(
                          child: Text(searchController.searchState[index].title, 
                          style: const TextStyle(fontSize: 20)),  ),
  }

}

我认为您可以从阅读这篇文章

中受益