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

Question

我想展示一张包含文字的卡片。文本值来自 TextField 输入，只要按下按钮，它就会立即在新卡片上显示这些值。

我创建了两个单独的文件： 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

看起来你在每个文件上使用了不同的 NoteBloc 实例，你应该有一个单一的真实来源。

尝试使用 provider library 在 parent 上提供实例并在 children 上使用它。

您可以像这样在 parent 小部件上提供集团

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

你可以像这样child在任何child上消费它

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

如果您更喜欢包装小部件，也可以这样做

Consumer<NoteBloc>(
    builder: (context, bloc, _) => ChildWidget()

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

Want to show a list of cards with text which is coming from textfield on a screen when the send button is pressed

sqlite

dart

flutter

bloc

notetextfield.dart

notestream.dart

bloc.dart