列表未在Flutter中填充

ghg1uchk  于 2023-02-16  发布在  Flutter
关注(0)|答案(1)|浏览(123)

我试图有一个表单,当我填写它将填充一个列表视图,但似乎不能得到该列表与任何值popuate。
我使用以下代码来创建底部导航:

class _AppState extends State<App> {
  int _currentIndex = 0;
  final List<Widget> body = [
    AddNewStudent(),
    StudentList(),
  ];

在格式如下所示的文件中:

class StudentClass {
  String kidFirstName;
  String kidLastName;
  DateTime dateOfBirth;
  int totalAttedance = 0;
  int attedanceAtRank = 0;

  StudentClass(
      {required this.kidFirstName,
      required this.kidLastName,
      required this.dateOfBirth});
}

class AddNewStudent extends StatefulWidget {
  @override
  AddStudentScreen createState() => AddStudentScreen();
}

class AddStudentScreen extends State<AddNewStudent> {
  List<StudentClass> studentList = [];
  void addStudent(StudentClass newStudent) {
    setState(() {
      studentList.add(newStudent);
    });
  }
  
  final formKey = GlobalKey<FormState>();
Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(20.0),
        child: SingleChildScrollView(
            child: Column(
          children: [
            Form(
              key: formKey,
              child: Column(
                children: [
                  kidsFirstNameFormField(),
                  kidLastNameFormField(),
                  kidDateofBirth(),
                  submitButton(),
                ],
              ),
            ),
          ],
        )));
  }
Widget submitButton() {
    return ElevatedButton(
      child: Text('Create New Student Profile'),
      onPressed: () {
        if (formKey.currentState?.validate() ?? false) {
          formKey.currentState?.save();
          StudentClass newStudent = StudentClass(
            kidFirstName: kidFirstName,
            kidLastName: kidLastName,
            dateOfBirth: dateOfBirth,
          );
          addStudent(newStudent);
          formKey.currentState?.reset();
        }
      },
    );
  }

列表视图构建器位于其自己的文件中:

class StudentList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<StudentClass> studentList = [];
    return Scaffold(
      appBar: AppBar(
        title: Text('Student List'),
      ),
      body: StudentListState(
        studentList: studentList,
      ),
    );
  }
}

class StudentListState extends StatefulWidget {
  final List<StudentClass> studentList;
  StudentListState({required this.studentList});
  @override
  _StudentListState createState() => _StudentListState();
}

class _StudentListState extends State<StudentListState> {
  void addStudent(StudentClass student) {
    setState(() {
      widget.studentList.add(student);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(20.0),
        child: ListView.builder(
          itemCount: widget.studentList.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(widget.studentList[index].kidFirstName),
              subtitle: Text(widget.studentList[index].kidLastName),
              trailing: Text(widget.studentList[index].dateOfBirth.toString()),
            );
          },
        ));
  }
}

我很难弄清楚如何将信息传递给列表来填充。我已经让它构建起来没有错误,但不知何故,我知道我没有正确传递它。我知道我可能在这里有一个额外的列表。

6jjcrrmo

6jjcrrmo1#

您正在更新AddStudentScreen小部件的studentList,并且在ListView中,您正在从StudentList小部件渲染studentListStudentList小部件是另一个变量,始终为空。
另外,您在build函数内部初始化studentList,这意味着在每个setState()上,studentList都将被初始化为空列表。
看起来你想在多个小部件中使用相同的数据。在这种情况下考虑使用状态管理器。
对于您的场景,我建议您使用stream_mixin
示例:

  • 使用stream_mixin包中的StoreService创建学生服务。
class StudentModel extends BaseModel { // NOTICE THIS
  String kidFirstName;
  String kidLastName;
  DateTime dateOfBirth;
  int totalAttedance = 0;
  int attedanceAtRank = 0;

  StudentModel({
    required this.kidFirstName,
    required this.kidLastName,
    required this.dateOfBirth,
    required String id,
  }) : super(id: id);
}

class StudentService extends StoreService<StudentModel> { // NOTICE THIS
  StudentService._();
  static StudentService store = StudentService._(); // Just creating a singleton for StudentService.
}
  • 要在商店中添加学生数据(请注意,此操作可在应用程序中的任何位置完成):
const student = new StudentModel(
  // add student data here
)
StudentService.store.add(student);
  • 呈现此学生列表
StreamBuilder<StudentModel>(
  stream: StudentService.store.onChange,
  builder: (context, snapshot) {
    if (snapshot.data == null) {
      return Text("No student added yet.");
    }
    return ListView.builder(
      itemCount: StudentService.store.values.length,
      itemBuilder: (context, index) {
        const student = StudentService.store.values[index];
        return ListTile(
          title: Text(student.kidFirstName),
          subtitle: Text(student.kidLastName),
          trailing: Text(student.dateOfBirth.toString()),
        );
      },
    )
  },
)

现在,每当您使用StudentService.store.add()添加学生数据时,它将发出一个事件,您的SteamBuilderstream: StudentService.store.onChange正在侦听该事件,并将更新UI以显示更新后的列表。
这也将消除StatefulWidget的必要性。这意味着您可以只使用StatelessWidget,除非您需要StatefulWidget用于其他用途。

相关问题