StatefulWidget - FLutter

Question

我需要编辑这段代码，只需要定义一个变量小部件，它可以在每个状态上更改为不同的小部件类型。我需要能够形成一个动态的形式，无论问题和它的类型是什么，我处理它的方式在某种程度上是复杂的和没有效率的。那么，对于如何在每个setState()上为不同的小部件更改相同的变量，有什么想法吗？

    `Column(
                  children: <Widget>[
                    questionText,
                    textCounter > 0 ? textField : SizedBox(),
                    selectCounter > 0 ? selectField : SizedBox()
                  ],
                )),`FutureBuilder(
              future: fetchQuestions(),
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  for (var i = 0; i < snapshot.data.length; i++) {
                    var temp = snapshot.data[i]['question_value'].toString();
                    var type = snapshot.data[i]['question_type'].toString();
                    questionsList.add(temp);
                    typeList.add(type);
                  }

                  return Align(
                    alignment: Alignment.bottomRight,
                    child: RaisedButton(
                      onPressed: () {
                        changeQuest(questionsList, typeList,
                            snapshot.data.length, snapshot.data);
                      },
                      child: Text('next'),
                    ),
                  );
                } else
                  return Center(child: CircularProgressIndicator());
              },
            ),

    changeQuest(List questions, List type, length, data) {
    setState(() {
      textCounter = 0;
      selectCounter = 0;
      integerCounter = 0;
      if (counter < length) {
        questionText = Text(questions[counter]);
        if (type[counter] == 'Integer') {
          textCounter++;
          textField = TextFormField(
            decoration: new InputDecoration(labelText: "Enter your number"),
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              WhitelistingTextInputFormatter.digitsOnly
            ], // Only numbers can be entered
          );
        } else if (type[counter] == 'Text') {
          textCounter++;
          textField = TextFormField(
            decoration: new InputDecoration(labelText: "Enter a text"),
            keyboardType: TextInputType.text,
          );
        } else if (type[counter] == 'Select') {
          selectCounter++;
          for (var i = 0; i < data[counter]['answers'].length; i++) {
            answersList
                .add(data[counter]['answers'][i]['answer_value'].toString());
          }
          dropDownValue = answersList[0];
          selectField = DropdownButton<String>(
            value: dropDownValue,
            icon: Icon(Icons.arrow_downward),
            iconSize: 24,
            elevation: 16,
            style: TextStyle(color: Colors.deepPurple),
            underline: Container(
              height: 2,
              color: Colors.deepPurpleAccent,
            ),
            onChanged: (value) {
              setState(() {
               dropDownValue = value;
              });
            },
            items: answersList
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
          );
          print (dropDownValue);
        }
      }

      counter++;
    });
  }

Answer 1

正如@proversion在注释中所说的那样，您可以在小部件树中签入，条件是否返回true或false。

在输入子语句之前，可以使用如下所示的内联if-语句进行检查：questionType == 'dropdown' ? (Widget for True) : (Widget for False)

或者，如果您必须执行复杂的检查，我将在小部件的build方法之前在return中这样做，并在那里设置一个布尔值，该值表示您的检查结果。然后，可以在小部件树(如isTrue)中使用这个值(例如：isTure ? (Widget for True) : (Widget for False) )。

下面是一个示例代码，应该可以工作。

import 'package:flutter/material.dart';

class WidgetWithDifferentChildren extends StatefulWidget {
  @override
  _WidgetWithDifferentChildrenState createState() =>
      _WidgetWithDifferentChildrenState();
}

class _WidgetWithDifferentChildrenState
    extends State<WidgetWithDifferentChildren> {
  String questionType = '';
  String dropdownValue = 'SelectItem';
  String textValue = '';
  TextEditingController txtCtrl = TextEditingController();

  @override
  void dispose() {
    // TODO: implement dispose when using TextEditingController
    txtCtrl.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: questionType == ''
          ? Text('no Question Type')
          : questionType == 'dropdown'
              ? DropdownButton<String>(
                  value: dropdownValue,
                  onChanged: (String newValue) {
                    // Do something with the new Value
                    print('New DropDown value = $newValue');
                    setState(() {
                      dropdownValue = newValue;
                    });
                  },
                  items: <String>[
                    'SelectItem',
                    'Item 1',
                    'Item 2',
                    'Item 3',
                  ].map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: new Text(value),
                    );
                  }).toList(),
                )
              : questionType == 'textfield'
                  ? TextFormField(
                      controller: txtCtrl,
                      onChanged: (value) {
                        // Do something with the new Value
                        print('New TextField value = $value');
                        setState(() {
                          textValue = value;
                        });
                      },
                    )
                  : Text('Question Type does not match'),
    );
  }
}

更新

acc.对于您提供的代码，您可能需要检查以下内容。我创建了一个单独的类，它将为这个问题返回正确的小部件。只需将type和附加的dropDownList传递给函数即可。

通常，我建议将问题和相应的答案存储在同一个数组中，这将是像getInputWidget(type:question[i].type, dropDownList:question[i].dropDownList)这样的函数的一个简单调用。

​

​

以上示例的源代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class WidgetWithDifferentChildren extends StatefulWidget {
  @override
  _WidgetWithDifferentChildrenState createState() =>
      _WidgetWithDifferentChildrenState();
}

class _WidgetWithDifferentChildrenState
    extends State<WidgetWithDifferentChildren> {
  String questionType = '';
  String inputValue = '';
  List<String> answers = [];
  int questionID = 0;
  TextEditingController txtCtrl = TextEditingController();

  List<Map<String, String>> questionList = [
    {'question_value': 'text question ', 'question_type': 'text'},
    {'question_value': 'number question ', 'question_type': 'number'},
    {'question_value': 'select question ', 'question_type': 'select'},
    {'question_value': 'last question ', 'question_type': 'text'},
  ];
  List<String> dropDownList = [
    'Select an Item',
    'Answer A',
    'Answer B',
    'Answer C',
  ];

  @override
  void dispose() {
    // TODO: implement dispose when using TextEditingController
    txtCtrl.dispose();
    super.dispose();
  }

  Widget getInputWidget({@required String type, List<String> dropDownList}) {
    Widget inputW;
    if (type == 'number' || type == 'text') {
      inputW = TextFormField(
        controller: txtCtrl,
        decoration: new InputDecoration(labelText: "Enter a $type"),
        keyboardType:
            type == 'text' ? TextInputType.text : TextInputType.number,
        inputFormatters: <TextInputFormatter>[
          type == 'text'
              ? LengthLimitingTextInputFormatter(50)
              : WhitelistingTextInputFormatter.digitsOnly
        ], // Only numbers can be entered
        onChanged: (value) {
          setState(() {
            inputValue = value;
          });
        },
      );
    } else if (type == 'select') {
      if (inputValue.length == 0) {
        // set the input Value for the first time
        inputValue = dropDownList[0];
      }
      inputW = DropdownButton<String>(
        value: inputValue,
        icon: Icon(Icons.arrow_downward),
        iconSize: 24,
        elevation: 16,
        style: TextStyle(color: Colors.deepPurple),
        underline: Container(
          height: 2,
          color: Colors.deepPurpleAccent,
        ),
        onChanged: (value) {
          setState(() {
            inputValue = value;
          });
        },
        items: dropDownList.map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList(),
      );
    }

    return inputW;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(vertical: 30, horizontal: 30),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            RaisedButton(
              onPressed: () {
                setState(() {
                  answers.add(inputValue);
                  inputValue = '';
                  txtCtrl.clear();
                  questionID = questionID + 1;
                });

                // unfocus to close the Keyboard
                // conrtibution to: https://flutterigniter.com/dismiss-keyboard-form-lose-focus/
                FocusScopeNode currentFocus = FocusScope.of(context);
                if (!currentFocus.hasPrimaryFocus) {
                  currentFocus.unfocus();
                }
              },
              child: Text('next'),
            ),
            getInputWidget(
                type: questionList[questionID]['question_type'],
                dropDownList: dropDownList),
            Divider(thickness: 2),
            Text('You enter: $inputValue'),
            Divider(thickness: 2),
            Text('Your answers are:'),
            Flexible(
              child: ListView.builder(
                  itemCount: answers.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text('$index. ${answers[index]}'),
                    );
                  }),
            ),
          ],
        ),
      ),
    );
  }
}