列表视图中一次只显示一项

Question

我似乎不知道如何让列表中的所有项目显示在列表视图中

目前，当我单击按钮显示列表时，只显示一项。如果我单击返回，然后再次单击主按钮，它将显示列表中的 2 个项目。冲洗并重复，3 项。我似乎无法使用打印语句进行调试以查看我的错误所在。当我尝试 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对象？等等）

感谢您的任何帮助。抱歉，我对飞镖有点陌生，所以这是一个巨大的学习曲线

Answer 1

您的代码中有几个问题。这不起作用的主要原因是因为您将 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];
        ...
      },
    );
  }
}

当我尝试 print(trails) 或其他变体时，它会显示 Instance of trail model (不是很有帮助)

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

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