有没有办法在颤动中创建动态表单答案

【问题标题】：is there a way to create a dynamic form in flutter有没有办法在颤动中创建动态表单
【发布时间】：2022-10-12 22:04:57
【问题描述】：

有没有人知道如何在颤动中实现接近下图的东西这个想法是创建一个用户界面，用户可以为该问题创建问题和答案，并选择将上传到后端数据库的正确答案，我首先创建了一个 emty 列表，当您点击与 for 循环挂钩的 addquetions 按钮时，该列表会添加新的文本，如下所示。

class _QuestionsSectionState extends State<QuestionsSection> {
  final questionsField = <String>[];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (var i = 0; i < questionsField.length; i++)
          Row(
            children: [
              Expanded(
                child: TextField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    helperText: 'Question',
                  ),
                  onChanged: (value) { 
                  },
                ),
              ),
              IconButton(
                onPressed: () {
                  questionsField.removeAt(i);
                  setState(() {});
                },
                icon: const Icon(Icons.remove_circle),
              ),
            ],
          ),
        const SizedBox(height: 12),
        ElevatedButton(
          onPressed: () {
            questionsField.add('');
            setState(() {});
          },
          child: const Text('+ add question Field'),
        ),
      ],
    );
  }
}

但问题是当我删除一个文本字段时，它从最后一个弹出而不是应该弹出的索引，所以我使用了一个字符串映射，它看起来像下面的代码。

class _QuestionsSectionState extends State<QuestionsSection> {
  final questionsField = <Map<String, String>>[];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (var i = 0; i < questionsField.length; i++)
          Row(
            key: ValueKey(questionsField[i].keys.first),
            children: [
              Expanded(
                child: TextField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(),
                    helperText: 'Question',
                  ),
                  onChanged: (value) {
                    final key = questionsField[i].keys.first;
                    questionsField[i][key] = value;
                    setState(() {});
                  },
                ),
              ),
              IconButton(
                onPressed: () {
                  questionsField.removeAt(i);
                  setState(() {});
                },
                icon: const Icon(Icons.remove_circle),
              ),
            ],
          ),
        const SizedBox(height: 12),
        ElevatedButton(
          onPressed: () {
            questionsField.add({const Uuid().v1(): ''});
            setState(() {});
          },
          child: const Text('+ add Field'),
        ),
      ],
    );
  }
}

它解决了添加多个问题和删除每个特定问题的问题但我仍然无法弄清楚如何为可以毫无问题地删除的问题的答案创建相同的过程。模型如下。

class QuestionValues {
  QuestionValues({
    required this.question,
    required this.answer,
    required this.correctAnswer,
  });
  Map<String, String> question;
  List<Map<String, String>> answer;
  String correctAnswer;
}

【问题讨论】：

标签： flutter forms dart for-loop flutter-layout

【解决方案1】：

你可以这样做。

在文本字段中添加问题

onclick 将此问题放在问题列表中并在运行时显示并清除控制器以获取新问题。

你也可以对答案做同样的事情。

将答案添加到答案列表并使用相同的文本字段作为下一个答案。

像这样

【讨论】：