Question

我有以下情况：我的一个应用屏幕的一部分代码：

class StartFillInfoScreen extends StatefulWidget {
  @override
  _StartFillInfoScreenState createState() => _StartFillInfoScreenState();
}

class _StartFillInfoScreenState extends State {
  InputGoalWidget _nameWidget;
  InputGoalWidget _calorieWidget;
  InputGoalWidget _stepsWidget;
  InputGoalWidget _waterWidget;

  @override
  void initState() {
    super.initState();
    _nameWidget = InputGoalWidget(title: "What is your name?", emoji: EmojiPack.man);
    _calorieWidget = InputGoalWidget(title: "What is your calorie goal?", emoji: EmojiPack.pizza);
    _stepsWidget = InputGoalWidget(title: "What is your steps goal?", emoji: EmojiPack.shoe);
    _waterWidget = InputGoalWidget(title: "What is your water goal?", emoji: EmojiPack.droplet);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(AppColors.layoutBackgroundColor),
      body: Column(
        children: <Widget>[
          buildGoalInputs(),
        ],
      ),
    );
  }

  Column buildGoalInputs() {
    return Column(children: <Widget>[_nameWidget, _calorieWidget, _stepsWidget, _waterWidget]);
  }

}

如您所见，在这里我创建了4 InputGoalWidget。他们每个人都有自己的TextField。单击后，我要在屏幕上有一个按钮，我想从TextField的{{1}}获取数据。这是我的小部件的代码：

InputGoalWidget

如您所见，我在class InputGoalWidget extends StatefulWidget { final String title; final String emoji; String inputData; InputGoalWidget({this.title, this.emoji}); @override _InputGoalWidgetState createState() => _InputGoalWidgetState(); } class _InputGoalWidgetState extends State<InputGoalWidget> { @override Widget build(BuildContext context) { return Container( height: MediaQuery.of(context).size.height*0.15, color: Colors.white, child: Row( children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 20.0, right: 16), child: Text( widget.emoji, textAlign: TextAlign.justify, style: TextStyle(fontSize: 32), ), ), Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Padding( padding: const EdgeInsets.only(top: 24.0, bottom: 8.0), child: Text(widget.title, style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold)), ), Container( height: MediaQuery.of(context).size.height*0.09, width: MediaQuery.of(context).size.width * 0.7, child: TextField( onChanged: (_inputData) => widget.inputData = _inputData, ), ) ], ) ], ), ); } }上添加了String inputData，但未添加其状态。在我的屏幕上，此变量为

InputGoalWidget

但是我不认为这是最好的方式。因此，您能解释一下，我应该如何美化我的代码。预先感谢！

Answer 1

将小部件代码更改为此：

class InputGoalWidget extends StatefulWidget {
  final String title;
  final String emoji;
  final TextEditingController controller;

  InputGoalWidget({this.title, this.emoji, this.controller});

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

然后在您的InputGoalWidget的构建方法中：

      Container(
                height: MediaQuery.of(context).size.height*0.09,
                width: MediaQuery.of(context).size.width * 0.7,
                child: TextField(
                  controller: widget.controller,
                ),
              )

现在输入屏幕代码：

  InputGoalWidget _nameWidget;
  InputGoalWidget _calorieWidget;
  InputGoalWidget _stepsWidget;
  InputGoalWidget _waterWidget;
  Controller nameInputController;
  //Three more controllers for 3 remaining inputGoalWidgets
  @override
  void initState() {
    super.initState();
    _nameWidget = InputGoalWidget(title: "What is your name?", emoji: EmojiPack.man, controller: nameInputController);
    // similarly for other three widgets
  }

现在，当您要访问_nameWidget的值时，只需使用： nameController.text

Answer 2

将可变数据存储在窗口小部件中是一种不好的做法。窗口小部件状态可以附加到另一个窗口小部件实例，这将导致不可预测的行为。

对于这种情况，我看到两个选择：
1.将回调函数传递给InputGoalWidget并从TextField.onChanged进行调用
2.将TextEditingController传递到InputGoalWidget，并将其设置为TextField.controller

在两种情况下，您都可以将InputGoalWidget设置为StatelessWidget

如何从屏幕上的小部件输入中获取文本，该小部件具有此小部件作为构建功能元素？

2 个答案: