flutter - 如何从Flutter/Dart中的可重用StatefulWidget中获取数据？

我在Flutter中制作了以下可重用的小部件。它用于显示从Cloud Firestore提取的项目的下拉列表，并且当用户选择一个选项时，应将其传递给变量answer。

但是，当我使用窗口小部件Survey Answer时，下拉菜单项将按预期显示，但是我无法将所选选项从onChanged传递出我的窗口小部件-print(widget.answer);在Dart Console中显示了正确的选项，即从下拉菜单中选择的选项，但是当我在其他页面上使用此小部件并尝试打印出答案变量的值时，我只是返回了null。

有人可以对此有所启发吗？

可重用的小部件:

class SurveyAnswer extends StatefulWidget {
  final String collection1;
  final String document;
  final String collection2;
  var answer;

  SurveyAnswer(
      {Key key,
      @required this.collection1,
      @required this.document,
      @required this.collection2,
      @required this.answer})
      : super(key: key);

  @override
  _SurveyAnswerState createState() => _SurveyAnswerState();
}

class _SurveyAnswerState extends State<SurveyAnswer> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance
            .collection(widget.collection1)
            .document(widget.document)
            .collection(widget.collection2)
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasError)
            return Center(child: Text("Error"));
          else if (!snapshot.hasData)
            return Center(child: Text("Loading..."));
          else if (snapshot.data.documents.isEmpty)
            return Center(child: Container(width: 0, height: 0));
          else {
            List<DropdownMenuItem> answerItems = [];
            for (int i = 0; i < snapshot.data.documents.length; i++) {
              DocumentSnapshot snap = snapshot.data.documents[i];
              answerItems.add(
                DropdownMenuItem(
                  child: Text(
                    snap.documentID,
                    style: TextStyle(color: Color(0xff303841)),
                  ),
                  value: "${snap.documentID}",
                ),
              );
            }
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FormBuilderDropdown(
                  attribute: 'attribute',
                  hint: Text('Please choose an option'),
                  validators: [FormBuilderValidators.required()],
                  items: answerItems,
                  onChanged: (answerValue) {
                    setState(() {
                      widget.answer = answerValue;
                      print(widget.answer);
                    });
                  },
                ),
              ],
            );
          }
        });
  }
}

在我的应用程序中如何使用以上内容:

                SurveyAnswer(
                    collection1: 'MySurveys',
                    document: 'FirestoreTestSurvey',
                    collection2: 'a01',
                    answer: 'ans01'),

在此示例中，我想创建一个变量ans01，该变量返回在下拉菜单中选择的值。

我之所以制作了一个可重用的小部件，是因为每个页面上都有很多调查项目，否则我的代码将变得一团糟。

谢谢。

最佳答案

你应该写回调函数

class SurveyAnswer extends StatefulWidget {
  final String collection1;
  final String document;
  final String collection2;
  final Function(String) onAnswer;

  SurveyAnswer(
      {Key key,
      @required this.collection1,
      @required this.document,
      @required this.collection2,
      @required this.onAnswer})
      : super(key: key);

  @override
  _SurveyAnswerState createState() => _SurveyAnswerState();
}

更改您的更改方法

onChanged: (answerValue) {
  widget.onAnswer(answerValue)
}

像这样使用

SurveyAnswer(
       collection1: 'MySurveys',
        document: 'FirestoreTestSurvey',
        collection2: 'a01',
        onAnswer:  (ans) {
        print(ans)
})