关于 Flutter State 和从 State vs StatefulWidget 中检索变量的问题

Question

这是上下文：

在我的应用中，用户可以创建一个问题，所有问题都会显示在某个页面上。这是通过 ListView.builder 完成的，它的 itemBuilder 属性返回 QuestionTile。

问题：

如果我创建一个新问题，新问题的文本（通常）显示为上一个问题的文本。

这是我按顺序添加三个问题的图片，“testqn123”、“testqn456”、“testqn789”，但都显示为“testqn123”。

热重启应用会为每个问题显示正确的文本，但热重启不起作用。

在我的 _QuestionTileState 类中，如果我更改负责在页面上显示问题文本的行，从

child: Text(text)

到

child: Text(widget.text)

问题将得到解决。我不太熟悉热重启/重新加载和状态如何在颤动中工作，但是有人可以解释所有这些吗？

这是 QuestionTile 及其对应的 State 类的代码，更改的行是最后一行包含单词的行：

class QuestionTile extends StatefulWidget {
  final String text;
  final String roomName; 
  final String roomID; 
  final String questionID; //

  QuestionTile({this.questionID, this.text, this.roomName, this.roomID});

  @override
  _QuestionTileState createState() => _QuestionTileState(text);
}

class _QuestionTileState extends State<QuestionTile> {
  final String text;
  int netVotes = 0;
  bool expand = false;
  bool alreadyUpvoted = false;
  bool alreadyDownvoted = false;

  _QuestionTileState(this.text);

  void toggleExpansion() {
    setState(() => expand = !expand);
  }

  @override
  Widget build(BuildContext context) {
    RoomDbService dbService = RoomDbService(widget.roomName, widget.roomID);
    final user = Provider.of<User>(context);

    print(widget.text + " with questionID of " + widget.questionID);

    return expand
        ? ExpandedQuestionTile(text, netVotes, toggleExpansion)
        : Card(
            elevation: 10,
            child: Padding(
              padding: const EdgeInsets.fromLTRB(10, 7, 15, 7),
              child: GestureDetector(
                onTap: () => {
                  Navigator.pushNamed(context, "/ChatRoomPage", arguments: {
                    "question": widget.text,
                    "questionID": widget.questionID,
                    "roomName": widget.roomName,
                    "roomID": widget.roomID,
                  })
                },
                child: new Row(
                  // crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Column(
                      // the stack overflow functionality
                      children: <Widget>[
                        InkWell(
                          child: alreadyUpvoted
                              ? Icon(Icons.arrow_drop_up,
                                  color: Colors.blue[500])
                              : Icon(Icons.arrow_drop_up),
                          onTap: () {
                            dynamic result = dbService.upvoteQuestion(
                                user.uid, widget.questionID);
                            setState(() {
                              alreadyUpvoted = !alreadyUpvoted;
                              if (alreadyDownvoted) {
                                alreadyDownvoted = false;
                              }
                            });
                          },
                        ),
                        StreamBuilder<DocumentSnapshot>(
                          stream: dbService.getQuestionVotes(widget.questionID),
                          builder: (context, snapshot) {
                            if (!snapshot.hasData) {
                              return Center(child: CircularProgressIndicator());
                            } else {
                              // print("Current Votes: " + "${snapshot.data.data["votes"]}");
                              // print("questionID: " + widget.questionID);
                              return Text("${snapshot.data.data["votes"]}");
                            }
                          },
                        ),
                        InkWell(
                          child: alreadyDownvoted
                              ? Icon(Icons.arrow_drop_down,
                                  color: Colors.red[500])
                              : Icon(Icons.arrow_drop_down),
                          onTap: () {
                            dbService.downvoteQuestion(
                                user.uid, widget.questionID);
                            setState(() {
                              alreadyDownvoted = !alreadyDownvoted;
                              if (alreadyUpvoted) {
                                alreadyUpvoted = false;
                              }
                            });
                          },
                        ),
                      ],
                    ),

                    Container(
                      //color: Colors.red[100],
                      width: 290,
                      child: Align(
                          alignment: Alignment.centerLeft,
                          child: Text(text)), // problem solved if changed to Text(widget.text)
                    ),

                   

                    

  }
}

Answer 1

您可以使用 Stream Builder 包装您的 UI，这将允许 UI 在每次从 Firestore 更改任何值时更新。

由于您使用的是项目构建器，因此您可以包装与项目构建器一起放置的小部件。

应该更新 UI