map 并发送 flutter 中第一页到第二页的数据列表

Question

我想将数据从第一页发送到第二页并根据索引显示信息，但我无法做到。

下面是第一页的代码-：这里我做了一个卡片的列表视图，我在这里显示了一些数据。

import 'package:education/Screens/Home_View.dart';
import 'package:flutter/material.dart';
import 'package:education/OnTap_Screens/MyCourse_Details.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';






class MyCourses extends StatefulWidget {


  @override
  _MyCoursesState createState() => _MyCoursesState();
}

class _MyCoursesState extends State<MyCourses> {

  
  var courseid, coachid, course_name, course_title, course_description, course_duration, lecture_number;
  var data;

  Future<http.Request> getData() async
  {
    var client = new http.Client();
    final response = await client.get('http://192.168.0.104:5004/course_detail');
    final responseJson = json.decode(response.body);
    setState(() {
      dynamic courseid = responseJson['courseid'];
      dynamic coaching_id = responseJson['coachid'];
      dynamic coursename = responseJson['coursename'];
      dynamic coursetitle = responseJson['coursetitle'];
      dynamic coursedescription = responseJson['coursedescription'];
      dynamic courseduration = responseJson['courseduration'];
      dynamic lecturenumber = responseJson['lecturenumber'];


      coachid = coaching_id;
      courseid = courseid;
      course_name = coursename;
      course_title = coursetitle;
      course_description = coursedescription;
      course_duration = courseduration;
      lecture_number = lecturenumber;


      data = responseJson;

    });


    print(responseJson);
    client.close();
    // return responseJson;
  }






  @override
  void initState(){
    getData();
    super.initState();
  }




  @override
  Widget build(BuildContext context) {


    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('My Courses'),
        backgroundColor: Colors.deepPurpleAccent,
        centerTitle: true,
        elevation: 10,
        leading: InkWell(
            child: Icon(Icons.arrow_back_ios),
          onTap: (){
              Navigator.pushReplacement(context, MaterialPageRoute(
                builder: (context) => homeView()
              ));
          },
        ),
      ),
      body: ListView.separated(
        itemCount: coachid.length,
        itemBuilder: (context, index) {
          return
            buildCard(index);
        },
        separatorBuilder: (context, index) {
          return Divider();
        },
      ),
    );
  }






  Widget buildCard(int i){
    return Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [


          InkWell(
            child: Padding(
              padding: const EdgeInsets.only(left: 24, right: 24, top: 8),
              child: Card(
                elevation: 16,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(55),
                ),
                margin: EdgeInsets.symmetric(vertical: 16),
                child: Container(
                  height: 140,
                  child: Row(
                    children: <Widget>[

                      Expanded(
                        flex: 3,
                        child: Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(12),
                            color: Colors.white,
                          ),
                          child: Center(
                            child: Image.asset(
                              'img/ico.jpg',
                              fit: BoxFit.fill,
                            ),
                          ),
                        ),
                      ),


                      Expanded(
                        flex: 7,
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Column(
                            mainAxisAlignment: MainAxisAlignment
                                .spaceBetween,
                            crossAxisAlignment: CrossAxisAlignment
                                .start,
                            children: <Widget>[
                              Text(
                                '${course_name[i]}',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontSize: 18,
                                  fontWeight: FontWeight.bold,
                                ),
                              ),
                              Text(
                                '${course_description[i]}',    
                                style: TextStyle(
                                  color: Colors.grey,
                                  fontSize: 18,
                                ),
                                overflow: TextOverflow.fade,
                              ),


                            ],
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
            onTap: (){
              Navigator.pushReplacement(context, MaterialPageRoute(
                  builder: (context) => MyCourseDetails(data: data[i])
              ));
            },
          ),
        ],
      ),
    );
  }
}

现在我想在 select 任何卡上显示 rest 的详细信息，但我无法发送数据并相应地使用它。

下面是我在控制台上打印数据的简单屏幕-：

import 'package:flutter/material.dart';


class MyCourseDetails extends StatefulWidget {

  var data;
  MyCourseDetails({Key key, @required this.data}) : super(key: key);

  @override
  MyCourseDetailsState createState() => MyCourseDetailsState(this.data);
}



class MyCourseDetailsState extends State<MyCourseDetails> with SingleTickerProviderStateMixin {

  var mydata;
  MyCourseDetailsState(var course){
    mydata = course;
  }


  @override
  void initState() {
    super.initState();
    print(mydata);
  }


  @override
  Widget build(BuildContext context) {
    print(mydata);
    return Scaffold(
      body: Text($mydata),

}

请问有什么帮助吗？

Answer 1

请像这样从您的第一个屏幕更改 onTap 方法

onTap: (){
 Navigator.pushReplacement(context, MaterialPageRoute(
 builder: (context) => MyCourseDetails(coursename: coursename[i],lecturenumber: lecturenumber[i],courseduration: courseduration[i],coursetitle: coursetitle[i])
));

并像这样更改您的第二页代码

    class MyCourseDetails extends StatefulWidget {
  var coursename;
  var coursetitle;
  var coursedescription;
  var courseduration;
  var lecturenumber;

  MyCourseDetails(
      {this.coursedescription,
      this.courseduration,
      this.coursename,
      this.coursetitle,
      this.lecturenumber});

  @override
  MyCourseDetailsState createState() => MyCourseDetailsState();
}

class MyCourseDetailsState extends State<MyCourseDetails>
    with SingleTickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      children: [
        Text(widget.coursetitle),
        Text(widget.lecturenumber),
        Text(widget.courseduration),
      ],
    ));
  }
}

我希望这对你有用