【问题标题】:How to convert a json data into a List<widgets> in flutter?如何在颤动中将 json 数据转换为 List<widgets>?
【发布时间】:2021-04-28 11:45:48
【问题描述】:

a sample of what i have in mind

var url = 'https://www.googleapis.com/books/v1/volumes?q=egg';

Future<BookResponse> getData() async {
  var response = await http.get(url);
  var responseBody = jsonDecode(response.body);
  // print(responseBody);

  return BookResponse.fromJson(responseBody);
}

-----

 FutureBuilder<BookResponse>(
            future: getData(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.hasError) print(snapshot.error);
              if (snapshot.hasData) {
                return ListView.builder(
                    itemCount: snapshot.data.items.length,
                    itemBuilder: (context, index) {
                      return Card(
                          child: ListTile(
                        title:
                            Text(snapshot.data.items[index].volumeInfo.title),
                      ));
                    });
              } else
                return Center(child: CircularProgressIndicator());
            },
          )

我正在尝试创建一种将 json 映射转换为 List&lt;widgets&gt; 的方法,以便我可以使用它来显示项目。

我找不到将项目显示为行和列的方法。

是否可以使用FutureBuilder 拥有多个小部件? (例如,一行书籍和另一行显示作者

如果是这样,我会避免将其转换为List&lt;widgets&gt;

【问题讨论】:

    标签: json flutter dart flutter-layout flutter-futurebuilder


    【解决方案1】:

    将 JSON 数据转换为对象并:

    Row(
      children: entities.map((entity) => Text(entity.text)).toList();
    ),
    

    它创建一个带有小部件的列表。

    【讨论】:

    • 我已经用对象映射它们,我试图将它们显示为一行而不是一个列表
    • Row(children: snapshot.data.items .map((entity) => Text(entity.text)) .toList(), ) 它仍然没有显示。我需要更改实体吗?如果我在文本中单独调用项目(snapshot.data.items[0].title),它工作得很好
    • 不显示或项目显示不正确?
    • 可以加截图吗?
    • 我把它们排成一行:Row( children: [ for (var i = 0; i &lt; snapshot.data.items.length; i++) Text(snapshot.data.items[i].id) ], )
    猜你喜欢
    • 2019-07-30
    • 2020-11-25
    • 2020-04-16
    • 2020-06-14
    • 2020-10-09
    • 2021-09-14
    • 2022-08-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多