【发布时间】:2020-04-22 16:45:29
【问题描述】:
你好,我是 Flutter 的新手,我正在做一个项目,正在用 Flutter 创建一个表单构建器。为此,我们使用可拖动的项目,例如文本输入字段。一个可拖动的项目被放置在拖动目标中并且被接受就好了。但是,问题在于,当我们单击该项目以输入文本时,该项目会立即被删除。在下图中,蓝色是拖动目标,下面的白色是可拖动项目。如您所见,文本输入已正确添加,当我尝试向该字段添加输入时,该项目在我开始输入之前立即被删除。
我已经在 VS 代码调试器上逐步完成了这个,当我点击输入文本时,它会在项目被删除之前返回到这个 sn-p:
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',
),
),
);
}
}
这是一个示例图像:
【问题讨论】:
标签: flutter flutter-layout draggable