Question

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

我已经在VS代码调试器上完成了此步骤，当我单击以输入文本时，它将在删除该项目之前立即回到该代码段：

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

因为您在acceptData中声明了Widget build
当Widget重建acceptData成为null时
请从

更改

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

收件人

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

键入时删除Flutter Draggable TextFormField

1 个答案: