绘制并发送从第一页到第二页的数据列表

Question

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

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

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])
));
},
),
],
),
);
}
}

现在，当我选择任何卡时，我想在下一页显示其余的细节，但我无法发送数据并相应地使用它。

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

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),
],
));
}
}

我希望这将为你工作