想要在按下发送按钮时在屏幕上显示来自文本字段的文本卡片列表

Question

我想显示一张卡片，其中包含文字。文本值来自TextField输入，每当按下按钮时，该值应立即在新Card上显示这些值。

我创建了两个单独的文件： notestream.dart 显示卡片，并 notetextfield.dart 将值发送到数据库

notetextfield.dart

文本字段

 TextField(
    controller: _textEditingController,
    textInputAction: TextInputAction.newline,
    onChanged: (value) {
    messageText = value;
    noteText = value;
  },
            ......
            ......
  ), 

onPressed

 IconButton(
       onPressed: () {
       _textEditingController.clear();
       /Implement send functionality.
       final newNote = Note(noteText: noteText);

       if (newNote.noteText.isNotEmpty) {
       /*Create new Note object and make sure
        the Note textis not empty,
        because what's the point of saving empty
        Note
       */
       noteBloc.addNote(newNote);
       noteBloc.getNotes();
   }
  }, 

notestream.dart

将在包含卡代码的单独文件的帮助下生成卡。

final NoteBloc noteBloc = NoteBloc();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: noteBloc.notes,
      builder: (
                BuildContext context, 
                AsyncSnapshot<List<Note>>snapshot
               ) {

        if (snapshot.hasData) {
          /*Also handles whenever there's stream
          but returned returned 0 records of Note from DB.
          If that the case show user that you have empty Notes
         */
          return snapshot.data.length != 0
              ? ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, itemPosition) {
                    Note note = snapshot.data[itemPosition];
                    return NoteCard(
                      noteText: note.noteText,
                      noteImagePath: note.noteImagePath,
                    );
                  })

bloc.dart

class NoteBloc {
  //Get instance of the Repository
  final _noteRepository = NoteRepository();

  final _noteController = StreamController<List<Note>>.broadcast();

  get notes => _noteController.stream;

  NoteBloc() {
    getNotes();
  }

  getNotes({String query}) async {
    //sink is a way of adding data reactively to the stream
    //by registering a new event
    _noteController.sink.add(await _noteRepository.getAllNotes(query: 
 query));
  }

  addNote(Note note) async {
    await _noteRepository.insertNote(note);
    getNotes();
  }

  updateTodo(Note note) async {
    await _noteRepository.updateNote(note);
    getNotes();
  }

  dispose() {
    _noteController.close();
  }
} 

每当我按下 notetextfield.dart 文件中的onPressed按钮时，卡列表就不会显示在屏幕上。

Answer 1

好像您在每个文件上使用API的不同实例，您应该有一个单一的事实来源。

尝试使用provider library在父级上提供实例，并在其子级上使用它。

您将像这样在父窗口小部件上提供集团

NoteBloc

您可以在任何这样的孩子身上食用它

Provider<NoteBloc>(
  builder: (context) => NoteBloc(noteRepository: NoteRepository()),
  dispose: (context, value) => value.dispose()
  child: ParentWidget(),
)

或者如果您希望包装小部件，则此

final bloc = Provider.of<NoteBloc>(BuildContext context)