Flutter：如何根据用户选择动态添加新的文本字段？

Question

所以我想在选择一个选项后添加一个新的文本字段，但由于我是颤振的新手，所以我不知道如何做到这一点。

SelectFieldBloc selectFieldBloc = SelectFieldBloc(
                name: question.name,
                toJson: (option) => option?.optionText,
                validators: question.validation != null
                    ? [
                        (input) {
                          if (input != null) {
                            if (input is Option) {
                              Option option = input;
                              return inspectionValidator.inspect(
                                  option.optionText, question.validation);
                            } else if (input is SubOption) {
                              SubOption option = input;
                              return inspectionValidator.inspect(
                                  option.optionText, question.validation);
                            }
                          } else {
                            return inspectionValidator.inspect(
                                input, question.validation);
                          }
                        }
                      ]
                    : null,
                items: question.option);
            fieldBloc = selectFieldBloc;
            List<Widget> widgets = [];
            fieldBloc.onValueChanges(onData: (previous, current) async* {
              print(current.value?.optionText);
              if (current.value?.optionText == "Cultivated") {
                widgets.add(
                  TextFormField(
                    decoration: const InputDecoration(
                      border: UnderlineInputBorder(),
                      labelText: 'Enter your username',
                    ),
                  ),
                );
              }
            });
          }
          addFieldBloc(
            step: question.formId! - 1,
            fieldBloc: fieldBloc,
          );

我尝试添加一个小部件。添加文本字段，但我不知道哪里出了问题。以下显示了我所做的事情。

 fieldBloc = selectFieldBloc;
            List<Widget> widgets = [];
            fieldBloc.onValueChanges(onData: (previous, current) async* {
              print(current.value?.optionText);
              if (current.value?.optionText == "Cultivated") {
                widgets.add(
                  TextFormField(
                    decoration: const InputDecoration(
                      border: UnderlineInputBorder(),
                      labelText: 'Enter your username',
                    ),
                  ),
                );
              }

Answer 1

看我不明白到底想要做什么，但是如果你想将小部件添加到小部件列表中，你可以简单地创建列表并将其传递到列或列表视图中，当你添加新小部件时使用 setState 或重新渲染 UI设计模式之一，还有一个在 flutter 上调用 AnimtedList 的小部件，您可以在其中添加或删除小部件，
动画列表 https://api.flutter.dev/flutter/widgets/AnimatedList-class.html

还有一个将小部件添加到小部件列表中的示例

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Widget> widgets = [];
  Widget _createFormField(
      {required TextEditingController controller, required String hint}) {
    return Container(
      margin: EdgeInsets.all(10),
      child: TextFormField(
        controller: controller,
        decoration: _inputDecoration(hint),
      ),
    );
  }

  int index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          floatingActionButton: SizedBox(
      height: 50,
      width: 100,
      child: CupertinoButton(
        padding: EdgeInsets.zero,
        color: Colors.purple.shade300,
        onPressed: () {
          widgets.add(
            _createFormField(
                controller: TextEditingController(),
                hint: "field ${index++}"),
          );
          setState(() {});
        },
        child: Text('Add field'),
      ),
    ),
   
        body: Visibility(
          visible: widgets.isNotEmpty,
          child: ListView.builder(
              itemCount: widgets.length,
              itemBuilder: (context, index) => widgets[index]),
          replacement: Center(child: Text('no items')),
        ));
  }

  InputBorder _border() => OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(
            width: 1,
            color: Colors.deepPurple.withOpacity(.7),
            style: BorderStyle.solid),
      );
  InputDecoration _inputDecoration(String hint) => InputDecoration(
        contentPadding: const EdgeInsets.symmetric(horizontal: 5),
        filled: true,
        enabledBorder: _border(),
        focusedBorder: _border(),
        border: _border(),
        disabledBorder: _border(),
        errorBorder: _border(),
        focusedErrorBorder: _border(),
        errorStyle: const TextStyle(color: Color(0xffff99c2)),
        fillColor: Color(0xffff99c2),
        hintText: hint,
        alignLabelWithHint: true,
      );
}