0

我有一个带有 Flutter 的应用程序，尝试为产品引擎创建搜索，后端工作正常，因为我在邮递员上对其进行了测试，但是 Flutter 中的 Future Builder 有问题。首先，我有提供者通过搜索从服务器获取数据：

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import '../models/all_products.dart';

class ProductProvider with ChangeNotifier {
  List<Product> products = [];

  get myProdut => products;
  void search(name) async {
    try {
      var url = 'http://10.0.2.2:8000/api/user/search/$name';
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      for (var x in data) {
        var list = Product(
            id: x['id'],
            productName: x['productName'],
            categoryId: x['categoryId'],
            price: x['price'],
            sale: x['sale']);
        products.add(list);
      }
    } catch (e) {
      print(e);
    }
    notifyListeners();
  }
}

在搜索页面中，我在消费者内部有搜索图标，以便在单击执行搜索方法时收听提供者，我在消费者内部有 Future Builder 来查看数据：

return Container(
        margin: EdgeInsets.only(top: 15),
        child: ListView(
          children: [
        Text('Search for Producs',
            textAlign: TextAlign.center, style: TextStyle(fontSize: 26)),
        SizedBox(
          height: 15,
        ),
        Container(
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(40),
                border: Border.all(width: 2, color: Color(0xff0E2153))),
            margin: EdgeInsets.fromLTRB(10, 0, 10, 0),
            alignment: Alignment.center,
            width: mySize.width,
            child: ListTile(
              leading: Consumer<ProductProvider>(
                builder: (context, prodProv, child) {
                  return IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {
                      prodProv.search(_controller.text);
                    },
                  );
                },
              ),
              title: TextField(
                style: TextStyle(fontSize: 22, color: Color(0xff0E2153)),
                decoration: InputDecoration(
                    hintText: 'Search', border: InputBorder.none),
                controller: _controller,
              ),
            )),
        Consumer<ProductProvider>(builder: (context, prod, child) {
          var list = prod.myProdut;
          return ListView.builder(
          shrinkWrap: true,
            itemCount: list.length,
            itemBuilder: (context, index) {
              return ListTile(title: Text(list[index].productNameb));
            },
          );
        }),
      ],
        ));

当我加载搜索页面时出现此错误：Class 'Product' has no instance getter 'productNameb' ,因为列表中的所有数据都是：Instatnt of Product

我的错误在哪里？我该如何解决？

4

1 回答 1

0

问题已解决：首先我在搜索方法开始时添加明确的产品列表：

class ProductProvider with ChangeNotifier {
  List<Product> products = [];

  get myProdut => products;

  void search(name) async {
    try {
      products.clear();
      var url = 'http://10.0.2.2:8000/api/user/search/$name';
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      for (var x in data) {
        var list = Product(
            id: x['id'],
            product_name: x['product_name'],
            categoryId: x['categoryId'],
            price: x['price'],
            sale: x['sale']);
        products.add(list);
      }
    } catch (e) {
      print(e);
    }
    notifyListeners();
  }
}

将搜索图标按钮更改为 onchanged 文本字段：

Consumer<ProductProvider>(
                    builder: (context, prodProv, child) {
                      return TextField(
                        onChanged: (val) {
                          prodProv.search(val);
                        },
                        style:
                            TextStyle(fontSize: 22, color: Color(0xff0E2153)),
                        decoration: InputDecoration(
                            hintText: 'Search', border: InputBorder.none),
                        controller: _controller,
                      );
                    },
                  ),

和显示搜索结果的列表视图生成器：

Consumer<ProductProvider>(builder: (context, prod, child) {
              var list = prod.myProdut;
              return ListView.builder(
                shrinkWrap: true,
                itemCount: list.length,
                itemBuilder: (context, index) {
                  return ListTile(title: Text(list[index].product_name));
                },
              );
            }),
于 2020-12-09T12:32:16.477 回答