输入时删除了 Flutter Draggable TextFormField

Question

你好，我是 flutter 的新手，正在做一个项目，正在用 flutter 创建一个表单生成器。为此，我们使用可拖动的项目，例如文本输入字段。一个可拖动的项目被放置在拖动目标中并且被接受就好了。但是，问题是当我们点击该项目以输入文本时，该项目会立即被删除。下图中蓝色为拖动目标，下方白色为可拖动项。如您所见，文本输入已正确添加，当我尝试将输入添加到字段时，该项目在我什至可以开始输入之前立即被删除。

我已经在 VS 代码调试器上完成了这个，当我点击输入文本时 returns 在项目被删除之前我看到了这个片段：

Container(
                      width: MediaQuery.of(context).size.width / 4,
                      child: Draggable<Widget>(
                        child: ListTile(
                          title: Text('Add Text Response'),
                          trailing: Icon(Icons.text_fields),
                        ),
                        data: new TextInputItem(),
                        feedback: Text('Text'),
                      ),

相关代码如下：

class CreateProject extends StatefulWidget {
  @override
  _CreateProjectState createState() => _CreateProjectState();
}

    class _CreateProjectState extends State<CreateProject> {

      @override
      Widget build(BuildContext context) {
        List<Widget> acceptData = [];

        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Create New Project"),
            ),
            body: Padding(
              padding: EdgeInsets.all(10),
              child: Container(
                child: Column(
                  children: <Widget>[
                    Expanded(
                      child: DragTarget(
                        onWillAccept: (Widget addItem) {
                          print('checking if will accept item');
                          print(addItem);
                          if (addItem == null) {
                            return false;
                          }
                          return true;
                        },
                        onAccept: (Widget addItem) {
                          print('accepting an item');
                          acceptData.add(addItem);
                          print(acceptData);
                        },
                        builder: (context, List<dynamic> candidateData,
                            List<dynamic> rejectedData) {
                          return Container(
                            height: MediaQuery.of(context).size.height,
                            color: Colors.lightBlue[50],
                            child: acceptData.isEmpty
                                ? Center(
                                    child: Text('Add Form Fields Here'),
                                  )
                                : Column(children: acceptData),
                          );
                        },
                      ),
                    ),
                    Column(
                      children: <Widget>[
                        Container(
                          width: MediaQuery.of(context).size.width / 4,
                          child: Draggable<Widget>(
                            child: ListTile(
                              title: Text('Add Text Response'),
                              trailing: Icon(Icons.text_fields),
                            ),
                            data: new TextInputItem(),
                            feedback: Text('Text'),
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Container(
                          width: MediaQuery.of(context).size.width / 4,
                          child: Draggable<Widget>(
                            child: ListTile(
                              title: Text('Add User Location'),
                              trailing: Icon(Icons.location_on),
                            ),
                            //child: Text('User Location'),
                            data: new UserLocation(),
                            feedback: Text('Text'),
                          ),
                        ),
                      ],
                    ),
                    Column(
                      children: <Widget>[
                        Container(
                          width: MediaQuery.of(context).size.width / 4,
                          child: Draggable<Widget>(
                            data: new MultipleChoice(),
                            feedback: Text('Mult choice'),
                            child: ListTile(
                              title: Text('Add Multiple choice'),
                              trailing: Icon(Icons.add_box),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      }
    }

    class TextInputItem extends StatefulWidget {
      @override
      _TextInputItemState createState() => _TextInputItemState();
    }

    class _TextInputItemState extends State<TextInputItem> {
       final controller = new TextEditingController();
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: new EdgeInsets.all(8.0),
          child: new TextField(
            controller: controller,
            decoration: new InputDecoration(
              hintText: 'Text Input Prompt',
            ),
          ),
        );
      }
    }

这是一个示例图片：

Answer 1

因为你在Widget build
中声明了acceptData 当 Widget 重建 acceptData 再次成为 null
请更改

@override
  Widget build(BuildContext context) {
    List<Widget> acceptData = [];

到

List<Widget> acceptData = [];
@override
  Widget build(BuildContext context) {

输入时删除了 Flutter Draggable TextFormField

Flutter Draggable TextFormField removed when typing

draggable

flutter

flutter-layout