Question

我似乎无法弄清楚如何将列表中的所有商品显示在列表视图中

当前，当我单击我的按钮以显示列表时，仅显示一个项目。如果我单击返回，然后再次单击主按钮，它将显示列表中的2个项目。冲洗并重复3个项目。我似乎无法使用打印语句进行调试，以查看错误所在。当我尝试打印（轨迹）或其他变体时，它说轨迹模型的实例（不是很有帮助）。有任何想法吗？

这是我的代码：

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对象。 / p>

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

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

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

然后，在TrailList中，使用trails中的TrailModel列表：

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在类中使用toString方法的输出。您会看到Instance of trail model，因为这是您从超类Object获得的默认实现。您可以覆盖它以获得更多有用的信息：

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

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

1 个答案: