我似乎无法弄清楚如何让列表中的所有项目显示在 ListView 中

目前，当我点击按钮显示列表时，只有一个项目出现。如果我单击返回，然后再次单击主按钮，它会显示列表中的 2 个项目。冲洗并重复 3 件。我似乎无法使用 print 语句进行调试以查看我的错误所在。当我尝试 print(trails) 或其他变体时，它说 Instance of trail model (不是很有帮助)。有任何想法吗？

这是我的代码:

class HomeScreen extends State<MyApp> {
  int counter = 0;
  Future<List<TrailModel>> fetchData() async {
    counter++;
    var response = await get(
        'https://www.hikingproject.com/data/get-trails?lat=39.733694&lon=-121.854771&maxDistance=10&key=200419778-6a46042e219d019001dd83b13d58aa59');

    final trailModel = TrailModel.fromJson(json.decode(response.body));
    //trails.add(trailModel);
    setState(() {
      trails.add(trailModel);
    });

    return trails;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(title: Text("HikeLocator")),
      body: new RaisedButton(
        child: Text("click me"),
        onPressed: () async {
          final trails = await fetchData();
          Navigator.push(
            context,
            new MaterialPageRoute(builder: (context) => new ListScreen(trails)),
          );
        },
      ),
    ));
  }
}

class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;
  ListScreen(this.trails);

  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Here are your trails"),
      ),
      body: TrailList(trails),
    );
  }
}

class TrailList extends StatelessWidget {
  final List<TrailModel> trails;

  TrailList(this.trails);

  Widget build(context) {
    return ListView.builder(
      itemCount: trails.length,
      itemBuilder: (context, int index) {
        Object myText = json.encode(trails[index].trails);

        List<dynamic> myText2 = json.decode(myText);

        return Text(myText2[index]['name']);
      },
    );
  }
}

class TrailModel {
  Object trails;
  TrailModel(this.trails);
  TrailModel.fromJson(Map<String, dynamic> parsedJson) {
    trails = parsedJson['trails'];
  }
}

我认为我的问题可能在于 fetchData()，但我不完全确定。尝试至少打印出这些值以限制我的问题可能出在哪里。 (每次按下按钮只在列表中添加1吗？单击它时它只渲染一个吗？它是每次单击都获取所有数据还是只获取一个json对象？等等)

非常感谢您提供的任何帮助。抱歉，我是 Dart 的新手，所以这是一个巨大的学习曲线

最佳答案

您的代码中有几个问题。这不像您预期​​的那样工作的主要原因是因为您将 json 的所有元素解析为一个 TrailModel 对象，但是您的代码假设您将有多个 TrailModel 对象。

修复它并使其正常工作的最简单方法是使用 TrailModel.trails 中的列表，而不是小部件中的列表。

首先，在 ListScreen 中，只传递列表中的第一个元素。

class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;
  ...
  @override
  Widget build(BuildContext ctxt) {
    return new Scaffold(
      ...
      body: TrailList(trails.first),
    );
  }
}

然后，在 TrailList 中，使用来自 TrailModel 的 trails 列表:

class TrailList extends StatelessWidget {
  final TrailModel model;
  TrailList(this.model);

  Widget build(context) {
    return ListView.builder(
      itemCount: model.trails.length,
      itemBuilder: (context, int index) {
        final trail = model.trails[index];
        ...
      },
    );
  }
}

When I try print(trails) or other variations, it says Instance of trail model (not very helpful)

print 在您的类中使用 toString 方法的输出。您会看到 Instance of trail model，因为这是您从父类(super class) Object 获得的默认实现。您可以覆盖它以获得更有用的东西:

class TrailModel {
  @override
  String toString() => 'trails=$trails';
}

关于list - ListView 中一次只显示一个项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54731032/