根据对象列表生成新卡片

Posted 2023-02-23

【中文标题】根据对象列表生成新卡片

【英文标题】：Generating new Cards based on List of Objects

【发布时间】：2017-12-26 03:21:20

【问题描述】：

我有一个对象列表，有没有一种方法可以循环遍历 Card 小部件，以便为该列表中的每个对象创建一个具有此感兴趣小部件属性的新卡片。

下面的代码肯定是行不通的，它只是为了说明我想要实现的逻辑背后的逻辑

//function declaration and body...
List<CardInfo> list = new List();
for (var i in cardInfo) //cardInfo is a list of json created previously.
list.add(new CardInfo.fromJson(i));
    print (list); //tested the list and it contains the objects I want
 return list;

...

//my widget
    @override
      Widget build(BuildContext context) 
        return new Dismissible(
for (i in list)
            child:  new Card(
              child:
              new ListTile(leading: new Icon(Icons.star, color: Colors.yellowAccent,),
                title: new Text(list(i).field1),//field1 is a string in CardInfo
                subtitle: new Text(list(i).field2),//field2 is a string in CardInfo

这是可行的吗？

更新

我想办法将每个 JSON 转换为对象，然后直接使用对象，现在 _loadData() 函数在每次迭代时返回一个对象

_loadData() async 
  var url = 'myurl';
  var httpClient  = createHttpClient();
  var response =await httpClient.get(url);
  List cardInfo = JSON.decode(response.body);
  List<CardInfo> list = new List();
  for ( var i in cardInfo)
    var ci = new CardInfo.fromJson(i);

    list.add(new CardInfo.fromJson(i));

  return ci;
  
  //return list;




....

那么有没有办法设置我的类构造函数，以便它允许我访问返回对象的字段？像这样：

title: new Text(new CardInfo(_loadData()).field)

更新 2：

@override
    Widget build(BuildContext context) 
      return new FutureBuilder(
          future: _loadData(),
          builder: (BuildContext context, AsyncSnapshot<List> jsonList)
            if (jsonList.hasData==true)
              var cardInfo = jsonList.data[0];//is this right ?
              print (cardInfo); 
              return new Dismissible(
                child: new Column(
                  children:
                  cardInfo.map(
                          (CardInfo info)=>
                      new Card(
                          child: new ListTile(leading: new Icon(Icons.star, color: Colors.yellowAccent,),
                            title: new Text(info.field),
                            subtitle: new Text("Subtitle"),)

                      ) ), ),....

我的函数在顶部如下：

  _loadData() async 
var url = 'myurl';
var httpClient = createHttpClient();
var response = await httpClient.get(url);
List cardInfo = JSON.decode(response.body);


List<CardInfo> list = new List();
for (var i in cardInfo) 


list.add(new CardInfo.fromJson(i));



return list;

我收到以下错误：

“CardInfo”类没有实例方法“map”。

【参考方案1】：

您可以使用Iterable.map 方法来执行此操作。例如：

new Column(
  children: list.map(
    (CardInfo info) => new Card(child: new Text(info.field1)),
  ).toList()
)

【讨论】：

我尝试了其他可能更简单的方法，我不确定是否可行，但请您查看更新后的部分并给我您的反馈？

我试过你的解决方案，我得到以下错误（类'_Future'没有实例方法'map'）

网络代码是异步的，所以它返回一个未来。您应该将列表保存到 setState 回调中的列表中，或使用 FutureBuilder

去掉return ci语句，取消return list的注释。您现在可以使用 loadData 作为 FutureBuilder 的未来参数。在您的构建器回调中，如果 hasData 属性为 true，则使用 AsyncSnapshot 的 data 属性获取列表。

看起来 jsonList.data[0] 是 CardInfo。也许你的意思是 jsonList.data？