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),
      ],
    ),
  ),
)