将 listView 传递到另一个屏幕

Question

我需要帮助将列表视图传递到另一个屏幕。

我是 Flutter 和 Dart 的新手，但对一般编程很熟悉。我想出了如何从 api 调用创建列表。但是，我当前的代码，当我按下按钮时，它会显示在我当前所在的屏幕上。我想将它传递到另一个屏幕以显示在列表中（主页上将有文本字段将更改 url 以从中获取数据）。我想我在逻辑上试图做的是当用户按下按钮时，它会调用获取数据，构建我的列表并将其显示在不同的屏幕上。

import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'dart:convert';

void main(){
  runApp(
      MaterialApp(
      home: MyApp(),
  ),
  );
}
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeScreen();
  }
}

//List is here, had to make global so I could access in 2 widgets
List<TrailModel> trails=[];
class HomeScreen extends State<MyApp> {

  Future<List<TrailModel>> fetchData() async {
    var response = await get('https://www.hikingproject.com/data/get-trails?lat=40.0274&lon=-105.2519&maxDistance=10&key=200419778-6a46042e219d019001dd83b13d58aa59');
    final trailModels = List<TrailModel>();
    final trailModel = TrailModel.fromJson(json.decode(response.body));
    trails.add(trailModel);
    /*setState(() {
      trails.add(trailModel);
    });*/
    return trailModels;
  }

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

                );
              }
          ),

    )
    );
    }
}
//Display ListView in here
class ListScreen extends StatelessWidget {
  final List<TrailModel> trails;
  ListScreen(this.trails);

  //ListScreen(this.trails);
  @override
  Widget build (BuildContext ctxt) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("This is where the list lies"),
        ),
        body: TrailList(trails),
    );
  }
}

//create ListView here which I want displayed on 2nd page
class TrailList extends StatelessWidget {
  final List<TrailModel> trails;

  TrailList(this.trails);

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

      var splitString = myText.split("\, type");
      var splitString2 = splitString[0];
      var splitString3 = splitString2.split("name: ");
      String name = splitString3[1];

      splitString = myText.split("\, name");
      splitString2 = splitString[0];
      splitString3 = splitString2.split("id: ");
      String id = splitString3[1];

      splitString = myText.split("\, conditionStatus");
      splitString2 = splitString[0];
      splitString3 = splitString2.split("latitude: ");
      String latitude = splitString3[1];
      splitString = myText.split("\, latitude");
      splitString2 = splitString[0];
      splitString3 = splitString2.split("longitude: ");
      String longitude = splitString3[1];
      splitString = myText.split("\, url");
      splitString2 = splitString[0];
      splitString3 = splitString2.split(" location: ");
      String location = splitString3[1];


      return Text("name: $name,\n location: $location, \nlatitude: $latitude, \nlongitude: $longitude\n");

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

  }
}

自从我将一些小部件更改为有状态后，我单击以转到下一页的按钮不再起作用。我传递数据的尝试是传入 trails 变量，这是一个从主屏幕到下一页的列表，在 List Screen 中创建构造函数，然后在那里创建 ListView。但是，无法转到下一页。我不知道它是否有效。 .我最初并不打算发布我的所有代码，但我认为通过全貌查看类之间的交互会有所帮助。感谢您的帮助

Answer 1

您可以在RaisedButton 的onPressed 方法中使用async/await 方法（注意：需要添加async 关键字）。所以我建议你修改你的fetchMethod() 和onPressed 方法来做异步处理。您还应该修改List Screen 以在构造函数中获取trails。

希望对你有帮助！

fetchData() 示例：

Future<List<TrailModel>> fetchData() async {
  final response = await get('url_here');
  final trailModels = List<TrailModel>();
  final trailModel = TrailModel.fromJson(json.decode(response.body));
  trailModels.add(trailModel);
  return trailModels;
}

RaisedButton 示例：

RaisedButton(
  child: Text("click me"),
  onPressed: () async {
    final trails = await fetchData();
    Navigator.push(
      ctxt,
      new MaterialPageRoute(builder: (ctxt) => new ListScreen(trails)),
    );
  },
),

ListScreen 示例：

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("This is where the list lies"),
      ),
      body: TrailList(trails),
    );
  }
}

完整示例：

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HomeScreen();
  }
}

//List is here, had to make global so I could access in 2 widgets
List<TrailModel> trails = [];

class HomeScreen extends State<MyApp> {

  Future<List<TrailModel>> fetchData() async {
    final response = await get('url_here');
    final trailModels = List<TrailModel>();
    final trailModel = TrailModel.fromJson(json.decode(response.body));
    trailModels.add(trailModel);
    return trailModels;
  }

  @override
  Widget build(BuildContext ctxt) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("HikeLocator"),
        ),
        body:
        new RaisedButton(
            child: Text("click me"),

            onPressed: () async {
              final trails = await fetchData();
              Navigator.push(
                ctxt,
                new MaterialPageRoute(builder: (ctxt) => new ListScreen(trails)),

              );
            }
        ),
      ),
    );
  }
}

//Display ListView in here
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("This is where the list lies"),
        ),
        body:TrailList(trails),
    );
  }
}

//create ListView here which I want displayed on 2nd page
class TrailList extends StatelessWidget {
  final List<TrailModel> trails;

  TrailList(this.trails);

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

        var splitString = myText.split("\, type");
        var splitString2 = splitString[0];
        var splitString3 = splitString2.split("name: ");
        String name = splitString3[1];

        splitString = myText.split("\, name");
        splitString2 = splitString[0];
        splitString3 = splitString2.split("id: ");
        String id = splitString3[1];

        splitString = myText.split("\, conditionStatus");
        splitString2 = splitString[0];
        splitString3 = splitString2.split("latitude: ");
        String latitude = splitString3[1];
        splitString = myText.split("\, latitude");
        splitString2 = splitString[0];
        splitString3 = splitString2.split("longitude: ");
        String longitude = splitString3[1];
        splitString = myText.split("\, url");
        splitString2 = splitString[0];
        splitString3 = splitString2.split(" location: ");
        String location = splitString3[1];


        return Text(
            "name: $name,\n location: $location, \nlatitude: $latitude, \nlongitude: $longitude\n");
      },
    );
  }
}

class TrailModel {
  Object trails;

  TrailModel(this.trails);

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