如何在Flutter中一行显示未知数量的对话框？

8wtpewkr 于 2023-03-09 发布在 Flutter

关注(0)|答案(2)|浏览(101)

我尝试做的是向用户显示一个Dialog，其中包含一个Form，然后，用户填写2 TextFormFields并单击“Next ElevatedButton”。然后，将显示另一个类似的Dialog/form，用户可以执行相同的操作，直到他想要完成并按“Submit ElevatedButton（即，一个用户可能想要添加3个问题/答案，而另一个用户想要添加10个问题/答案）。此外，用户可以点击返回ElevatedButton并回顾先前的Dialog/Form。
我有下面的代码，但它不工作，因为它不能保持以前的表单状态，也不能提交表单：

class _FormQuestionsState extends State<FormQuestions> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: SingleChildScrollView(
        child: Column(
          children: [
            TextFormField(
              decoration: const InputDecoration(
                labelText: 'Queation',
                border: OutlineInputBorder(),
              ),
              validator: (value) {
                if (value!.isEmpty) return 'Please enter the title of the question';
              },
            ),
            TextFormField(
              minLines: 3,
              maxLines: 5,
              decoration: const InputDecoration(
                labelText: 'Answer',
                border: OutlineInputBorder(),
              ),
              validator: (value) {
                if (value!.isEmpty || value.length < 30) {
                  return 'Answer must be longer';
                }
              },

            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Expanded(
                    flex: 1,
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                        showDialog(
                            context: context,
                            builder: (context) =>
                                const Dialog(child: FormQuestions()));
                      },
                      child: Text('Back'),
                    ),
                  ),
                  Expanded(
                    flex: 2,
                    child: ElevatedButton(
                      onPressed: null, // This function should save all the information has been already put on all the forms!
                      child: Text('Submit'),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: ElevatedButton(
                      onPressed: () {
                        Navigator.of(context).pop();

                        showDialog(
                            context: context,
                            builder: (context) =>
                                const Dialog(child: FormQuestions()));
                      },
                      child: Text('Next'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我不知道如何修改它来达到我想要的。

flutter

来源：https://stackoverflow.com/questions/75633504/how-to-display-an-unknown-number-of-dialogs-in-a-row-in-flutter

2条答案

按热度按时间

4si2a6ki1#

您可以通过以下方式循环对话框并保存结果。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: TextButton(
          child: const Text('Show Form'),
          onPressed: () => _showForm(context),
        ),
      ),
    );
  }

  void _showForm(BuildContext context) async {
    final questionAnswers = <QuestionAnswer>[];

    var showNextQuestion = true;

    while (showNextQuestion) {
      final formKey = GlobalKey<FormState>();

      final returnValue = await showDialog<bool?>(
          context: context,
          useRootNavigator: false,
          builder: (context) {
            String? question, answer;
            return SimpleDialog(
              children: [
                Form(
                  key: formKey,
                  child: Column(
                    children: [
                      TextFormField(
                        decoration: const InputDecoration(
                          labelText: 'Question',
                          border: OutlineInputBorder(),
                        ),
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Please enter the title of the question';
                          }
                          return null;
                        },
                        onSaved: (value) => question = value,
                      ),
                      TextFormField(
                        minLines: 3,
                        maxLines: 5,
                        decoration: const InputDecoration(
                          labelText: 'Answer',
                          border: OutlineInputBorder(),
                        ),
                        validator: (value) {
                          if (value!.isEmpty || value.length > 30) {
                            return 'Answer must be longer';
                          }
                          return null;
                        },
                        onSaved: (value) => answer = value,
                      ),
                      Padding(
                        padding: const EdgeInsets.all(10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Expanded(
                              flex: 1,
                              child: ElevatedButton(
                                onPressed: () {
                                  Navigator.of(context).pop();
                                },
                                child: const Text('Back'),
                              ),
                            ),
                            Expanded(
                              flex: 2,
                              child: ElevatedButton(
                                onPressed: () {
                                  if (formKey.currentState!.validate()) {
                                    formKey.currentState?.save();
                                    questionAnswers.add(
                                        QuestionAnswer(question!, answer!));
                                    Navigator.of(context).pop(false);
                                  }
                                }, // This function should save all the information has been already put on all the forms!
                                child: const Text('Submit'),
                              ),
                            ),
                            Expanded(
                              flex: 1,
                              child: ElevatedButton(
                                onPressed: () {
                                  if (formKey.currentState!.validate()) {
                                    formKey.currentState?.save();
                                    questionAnswers.add(
                                        QuestionAnswer(question!, answer!));

                                    Navigator.of(context).pop();
                                  }
                                },
                                child: const Text('Next'),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            );
          });

      showNextQuestion = returnValue ?? showNextQuestion;
    }

    if (context.mounted) {
      Navigator.of(context).push(MaterialPageRoute(builder: (context) {
        return Scaffold(
          appBar: AppBar(),
          body: ListView.builder(
            itemBuilder: (context, index) {
              final item = questionAnswers[index];
              return ListTile(
                title: Text(item.question),
                subtitle: Text(item.answer),
              );
            },
            itemCount: questionAnswers.length,
          ),
        );
      }));
    }
  }
}

@immutable
class QuestionAnswer {
  final String question;
  final String answer;

  const QuestionAnswer(this.question, this.answer);
}

赞(0）回复(0）举报 2023-03-09

lyr7nygr2#

使用TextEditingController（），使用问题/答案的一些唯一字符串或索引作为键

Map<String, TextEditingController> inputcontroller = {};

inputcontroller["question1"] = TextEditingController();

TextFormField(
  controller: inputcontroller["question1"],
  decoration: const InputDecoration(
  labelText: 'Question',
    border: OutlineInputBorder(),
  ),
  validator: (value) {
    if (value!.isEmpty) return 'Please enter the title of the question';
    },
  ),

赞(0）回复(0）举报 2023-03-09

我来回答

如何在Flutter中一行显示未知数量的对话框？

2条答案

相关问题

热门标签

最新问答