Flutter：如何在ListView.builder中显示来自ListView.builder的数组数据？

Question

我有一个像这样的JSON文件：

[
  {
    "id": 1,
    "continent": "North America",
    "country": [
      {
        "name": "United States",
        "capital": "Washington, D.C.",
        "language": [
          "English"
        ]
      },
      {
        "name": "Canada",
        "capital": "Ottawa",
        "language": [
          "English",
          "French"
        ]
      }
    ]
  },
  {
    "id": 2,
    "continent": "Europe",
    "country": [
      {
        "name": "Germany",
        "capital": "Berlin",
        "language": [
          "German"
        ]
      }
    ]
  }
]

我使用https://app.quicktype.io/来解析JSON数据。 我创建了一个ListView.builder以显示各大洲的名称。 现在，我想显示每个大洲的“国家名称”，“首都”和“语言”。

所以请帮助我，这是主文件

import 'package:flutter/material.dart';
import 'model/continent_model.dart';
import 'services/continent_services.dart';

class ContinentPage extends StatefulWidget {
  ContinentPage() : super();
  @override
  _ContinentPageState createState() => _ContinentPageState();
}

class _ContinentPageState extends State<ContinentPage> {
  List<Continent> _continent;
  List<Country> _country;

  @override
  void initState() {
    super.initState();
    ContinentServices.getContinent().then((continents) {
      setState(() {
        _continent = continents;
      });
    });
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Container(
            child: ListView.builder(
                itemCount: null == _continent ? 0 : _continent.length,
                itemBuilder: (context, index) {
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Text(_continent[index].continent),
                      // how to create a ListView show a Column that includes:
                      // _country[index].name,
                      // _country[index].capital,
                      // _country[index].language,
                    ],
                  );
                })));
  }
}

Answer 1

您需要将第二个listview.builder放置在具有定义高度的容器中。

Container(
  height: 120,
  child: ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: map.length,
    itemBuilder: (context, index) => Column(
      children: [
        Text(_country.elementAt(index).name),
        Text(_country.elementAt(index).capital),
Text(_country.elementAt(index).language),
      ],
    ),
  ),
)

Answer 2

您可以在下面复制粘贴运行完整代码
您可以使用嵌套的add_action( 'wpcf7_form_autocomplete', 'my_change_subject' ); function my_change_subject( $wf7 ) { if($_GET['customerid'] == 1) { <script>$("input[name='subject']").val('hello john');</script> } } ?>
代码段

ListView.separated

描述所有细节太长了，您可以直接参考完整的代码

工作演示

完整代码

ListView.separated(
            separatorBuilder: (BuildContext context, int index) {
              return SizedBox(
                height: 10,
              );
            },
            shrinkWrap: true,
            itemCount: null == _continent ? 0 : _continent.length,
            itemBuilder: (context, index) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Expanded(
                            flex: 1, child: Text(_continent[index].continent)),
                        Expanded(
                          flex: 2,
                          child: Container(
                            height: 50,
                            child: ListView.separated(
                                separatorBuilder: