Flutter：如何将数组数据从 json Future< 传递到 Widget

如何解决Flutter：如何将数组数据从 json Future< 传递到 Widget

作为 Flutter 的新手，我正在学习并在旅途中跌跌撞撞。

我试图将我从 json 接收到的数组传递到已经等待的小部件结构中，但似乎无法获得连接。

示例代码如下：

class Products extends StatefulWidget {
  @override
  _Productsstate createState() => _Productsstate();
}

class _Productsstate extends State<Products> {
  @override
  void initState() {
    _getProducts();
  }

  Future<List<Single_prod>> _getProducts() async {
    var url = "";
    var data = await http.get(url);

    var jsonData = json.decode(data.body) as Map<String,dynamic>;
    //print(jsonData.toString());
    //jsonData.forEach((k,v) => print("Key : $k,Value : $v"));

    List<Single_prod> items = [];
    jsonData.forEach((k,v){
      Single_prod item = Single_prod(v["error"],v["id"],v["name"],v["price"],v["image"]);

      items.add(item);
    });
    //print(items.length);
    return items; <---Tring to pass this to Widget build but not recognized.....
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: items.length,gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),itemBuilder: (BuildContext context,int index){
          return Single_prod(
            prod_err: items[index]['error'],<--- This items array is not recognized
            prod_id: items[index]['id'],prod_name: items[index]['name'],prod_price: items[index]['price'],prod_image: items[index]['image'],);
        });
  }

}

在小部件中无法识别 items 数组

其余代码如下：

class Single_prod extends StatelessWidget {
  final prod_err;
  final prod_id;
  final prod_name;
  final prod_price;
  final prod_image;

  Single_prod({
    this.prod_err,this.prod_id,this.prod_name,this.prod_price,this.prod_image,});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
        tag: prod_name,child: Material(
          child: InkWell(
            onTap: () => Navigator.of(context).push(new MaterialPageRoute(
              // here we are passing the values of the products to the details page
                builder: (context) => new ProductDetails(
                  prod_detail_name: prod_name,prod_detail_image: prod_image,prod_detail_id: prod_id,prod_detail_price: prod_price,))),child: GridTile(
              footer: Container(
                height: 40.0,color: Colors.white70,child: ListTile(
                  leading: Text(prod_name,style: TextStyle(fontWeight: FontWeight.bold),),title: Text(
                    prod_price,style: TextStyle(color: Colors.blue,fontWeight: FontWeight.w800,fontSize: 12),/*subtitle: Text(
                    prod_oldprice,style: TextStyle(color: Colors.black,fontSize: 11,decoration: Textdecoration.lineThrough),*/
                ),child: Image.asset(prod_image,fit: BoxFit.cover,);
  }
}

上位码如何与下位码连接？ 提前致谢。

解决方法

首先，查看“items”变量的作用域：它在 getItems() 函数中定义，并且在函数外部不可见。所以，第一件事：让它成为类级别的属性。

接下来 - 您的 initState 将调用您的方法。方法是异步的，在 initState 中处理它的方法是在方法返回的 Future 上使用“.then”。您在这里要做的是：一旦未来完成，您想设置您的类级别变量以保存 _getProduct() 函数返回的值。

最后 - 理解这一点非常重要：您不会自己调用 build 方法 - Flutter 框架会为您完成。现在，flutter 没有一种神奇的方式来知道您何时更改了数据 - 它不会观察您的代码，因此您需要以某种方式告诉它您的状态对象已更改，并且它需要重建。您可以通过调用 setState() 函数来实现。

我认为您实际上还有另一个问题：您已经在 _getProduct() 中构建了 Single_prod 小部件，无需再次构建它。我也试图纠正这一点。

试试这个（我没有编译它，所以它可能有一些错误）：

class Products extends StatefulWidget {
  @override
  _ProductsState createState() => _ProductsState();
}

class _ProductsState extends State<Products> {

  List<Single_prod> items = [];
  @override
  void initState() {
    super.initState();
    _getProducts().then( (result) {
        setState(() {
           items=result;
        }
    });
  }

  Future<List<Single_prod>> _getProducts() async {
    var url = "";
    var data = await http.get(url);

    var jsonData = json.decode(data.body) as Map<String,dynamic>;
    //print(jsonData.toString());
    //jsonData.forEach((k,v) => print("Key : $k,Value : $v"));

    List<Single_prod> items = [];
    jsonData.forEach((k,v){
      Single_prod item = Single_prod(v["error"],v["id"],v["name"],v["price"],v["image"]);

      items.add(item);
    });
    //print(items.length);
    return items; 
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
        itemCount: items.length,gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),itemBuilder: (BuildContext context,int index){
          return items[index];
        });
  }

}