flutter集团/州管理的问题 - 如何通过页面之间的对象？

Question

我的实习老板要求我解决一个我目前无法解决的问题。 我已经收到一份现成的申请。这基本上是受宠若惊的考勤应用程序。

现在让我清楚地告诉你我面临的问题在哪里。当用户单击学生按钮时，它会将学生带到班级页面，并且在班级承诺中用户或学生必须通过 onTap 事件选择班级 -一个人点击并选择了班级。您，用户，转到另一个页面，用户需要再次点击才能最终进入签入页面 - 意味着另一个 OnTap 事件。/

现在我的老板想摆脱这两个OnTap 事件发生在其间。He想让我直接从学生按钮成长到学生项目页面，而不丢失所传递的对象的内容。请注意，我在这里只展示了重要的代码，废弃了 UI 代码，因为它会变得很长。请看看您是否能理解这些代码。

该应用程序使用块/状态管理系统。

学生按钮-从这里开始流程（这里仅重要代码）

final User user;
SelectUser({this.user});


Expanded(
 child: GestureDetector(
   onTap: () {
     final ClassroomRepository classroomRepository =
         ClassroomRepository(
       classroomApiClient: ClassroomApiClient(
         httpClient: http.Client(),
       ),
     );
     Navigator.push(
         context,
         MaterialPageRoute(
             builder: (context) => BlocProvider(
                   create: (context) => ClassroomBloc(
                       classroomRepository: classroomRepository),
                   child: ClassList(user: this.user),//user object is passed to the ClassList

                 )));

   },
   child: Image.asset('assets/logos/studentbutton.png'),
 )

上面是将用户对象传递给ClassList。下面是ClassList的完整代码：

class ClassList extends StatelessWidget {
 final User user ;
 ClassList({this.user});
 @override
 Widget build(BuildContext context) {
   return Scaffold(

       body: Center(
         child: BlocBuilder<ClassroomBloc, ClassroomState>(
           builder: (context, state) {
             if (state is ClassroomEmpty) {
               print('load');
               BlocProvider.of<ClassroomBloc>(context)
                   .add(FetchClassroom(schoolId: this.user.id));
               return Center(child: Text('Please Wait'));
             } else if (state is ClassroomLoading) {
               return Center(child: CircularProgressIndicator());
             } else if (state is ClassroomLoaded) {
               final classrooms = state.classrooms;
               return ListView.builder(
                 itemCount: classrooms.length,
                 itemBuilder: (context, position) {
                   return ClassItem(classroom: classrooms[position]);//GENERATES UI WITH ONTAP EVENT IN THE NEXT PAGE.
                 },
               );
             } else {
               return Text(
                 'Something went wrong!',
                 style: TextStyle(color: Colors.red),
               );
             }
           },
         ),
       ));
 }
}

现在，它会去Class ItemPage执行第一次onTap。您可以在上面的代码中看到（return ClassItem（classroom：classrooms [position]）从repo传递教室对象）

下面是Class Item Page的完整代码。在这里，我试图摆脱这个点击按钮，而不丢失已通过但反复失败的对象的内容。

import 'package:attendanceapp/blocs/student/blocs.dart';
import 'package:attendanceapp/repositories/student/repositories.dart';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:attendanceapp/models/classroom.dart';
import 'package:attendanceapp/widgets/student/student.dart';
class ClassItem extends StatelessWidget {
 final Classroom classroom ;
 ClassItem({this.classroom});

 @override
 Widget build(BuildContext context) {
   return GestureDetector(
     onTap: (){
       final VisitorRepository studentRepository = VisitorRepository(
         visitorApiClient: StudentApiClient(
           httpClient: http.Client(),
         ),
       );
       Navigator.push(context,
           MaterialPageRoute(builder: (context) =>
               BlocProvider(
                 create: (context) => StudentBloc(studentRepository:studentRepository),
                 child: Student(classroom: classroom),

               )
           )
       );
     },//tapping on the card
     child: Card(
         margin: EdgeInsets.all(20),
     child: Padding(
     padding: const EdgeInsets.all(20.0),
     child: Text(classroom.classroomName,style: TextStyle(fontSize: 30))
     )
     ),
   );
 }
}









From ClassItem Page , we go to the StudentPage passing ClassRooms as object.//Shows the Appbar and generates UI by returning the next page. Now this is the Page I don’t want to show but only pass the objects.



class Student extends StatelessWidget {
 final Classroom classroom ;
  Student({this.classroom});
 @override
 Widget build(BuildContext context) {

   return Scaffold(
       appBar: new AppBar(
         backgroundColor: Colors.amber[600],
         title: Text(classroom.classroomName),
       ),
       body:
       Center(

         child: BlocBuilder<StudentBloc, StudentState>(
           builder: (context, state) {
             if (state is StudentEmpty) {
               print(this.classroom);
               BlocProvider.of<StudentBloc>(context).add(FetchStudent(classId: this.classroom.id));
               return Center(child: Text('Please Wait'));
             } else if (state is StudentLoading) {
               return Center(child: CircularProgressIndicator());
             } else if (state is StudentLoaded) {
               final students = state.students;
               return ListView.builder(
                 itemCount: students.length,
                 itemBuilder: (context, position) {
                   return StudentItem(student:students[position], classroom: classroom,);
                 },
               );


             } else {
               return Text(
                 'Something went wrong!',
                 style: TextStyle(color: Colors.red),
               );
             }
           },
         ),
       ));
 }
}

最后，我们从 StudentButton 页面转到 StudeDetails 页面。下面是我想删除的 StudentItem 页面中的第二个 onTap。但失败了……我想从学生按钮页面转到学生项目页面，而不需要两个 OnTap 事件并且不丢失对象的内容。我已经尝试了7天，但失败了。我告诉我的实习老板这是可能的，因为每个学生都有一个课程，但他说无论如何都可以。

下面是我们在上一页中讨论的下一页。 我只需要显示从 StudentButton 开始的 StudentDetails 页面，而不执行两个 onTaps。我已经为此苦苦挣扎了大约7天，但仍然无法从studentButton转到studentDetails页面，跳过间歇性页面。

class StudentItem extends StatelessWidget {
 final Student student;
 final Classroom classroom;
 StudentItem({this.student, this.classroom});

 @override
 Widget build(BuildContext context) {
   return GestureDetector(
     onTap: () {
       final StudentAttendanceRepository attendanceRepository =
           StudentAttendanceRepository(
         studentAttendanceClient: StudentAttendanceClient(
           httpClient: http.Client(),
         ),
       );
       Navigator.push(
           context,
           MaterialPageRoute(
             settings: RouteSettings(name: '/studentDetail'),
             builder: (context) => BlocProvider(
               create: (context) => StudentAttendanceBloc(studentAttendanceRepository: attendanceRepository),
               child: StudentDetail(student: student,),
             ),
           ),
       ).then((value){
         if(value){
           BlocProvider.of<StudentBloc>(context).add(FetchStudent(classId: this.classroom.id));
         }
       });
     },

////UI CODES HERE…NOT PASTED HERE BECAUSE TOO LONG
    }

Answer 1

因此，要访问不同页面上的数据，您可以将数据传递到第1页，然后在集团中将数据传递给您的事件，您可以将此数据分配给州类之一。现在，在第2页或第3页，无论您要访问数据的地方，都可以使用bloclistener或blocbuilder，并使用状态对象访问数据。