Question

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

我是扑扑和飞镖游戏的新手，但对编程普遍熟悉。我想出了如何通过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变量（它是一个列表）传递到主屏幕的下一页，在列表屏幕中创建构造函数，然后在此处创建ListView。但是，无法转到下一页。我不知道它是否有效。。最初我不会发布所有代码，但是我认为这有助于从整体上了解类之间的交互。感谢您的帮助

Answer 1

您可以在RaisedButton的{{1}}方法中使用async / await方法（注意：需要添加onPressed关键字）。因此，我建议您修改async和fetchMethod()方法以进行异步处理。而且，您还应该修改onPressed以获得构造函数中的List Screen。

希望这对您有帮助！

fetchData（）示例：

trails

RaisedButton示例：

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;
}

ListScreen示例：

RaisedButton(
  child: Text("click me"),
  onPressed: () async {
    final trails = await fetchData();
    Navigator.push(
      ctxt,
      new MaterialPageRoute(builder: (ctxt) => 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("This is where the list lies"),
      ),
      body: TrailList(trails),
    );
  }
}

将listView传递到另一个屏幕

1 个答案: