Draggable 和 DragTarget,在 DragTarget 中接受 Draggable 后如何构建小部件?
Draggable and DragTarget, How can I build a widget after a Draggable has been accepted in a DragTarget?
我正在使用 flutter 构建一个简单的游戏,
我试过下面的代码,
在 dragTarget 运行 onAccept 函数后调用定位小部件...真的不知道为什么不构建小部件。
代码
Positioned(
bottom: 0,
child: DragTarget(
onWillAccept: (data){
print(data);
return true;
},
onAccept: (String value) {
print(caughtValue);
//HERE IS THE THING I WANT TO BUILD
Positioned(
child: Container(
width: 50,
height: 50,
child: Center(
child: Text('data'),
),
),
);
setState(() {
caughtValue = value;
});
},
如果您能提供帮助,我们将不胜感激。
您可以复制粘贴运行下面的完整代码
您可以使用 Visibility
包裹 Positioned
并放在 Stack
之下
当 onAccept
将 isVisible
更改为 true
代码片段
Stack(
alignment: Alignment.center,
children: <Widget>[
Draggable(
feedback: Text('draging'),
child: Text('drag me'),
),
Positioned(
top: 30,
child: DragTarget(
onAccept: (data) {
print(" onAccept");
setState(() {
isVisible = true;
targetText = "data";
});
},
...
Visibility(
visible: isVisible,
child: Positioned(
top: 450,
...
工作演示
完整代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text("DraggableDemo"),
),
body: Drag2TargetPage()),
);
}
}
bool isVisible = false;
class Drag2TargetPage extends StatefulWidget {
@override
_Drag2TargetPageState createState() => _Drag2TargetPageState();
}
class _Drag2TargetPageState extends State<Drag2TargetPage> {
var targetText = "Target";
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Draggable(
feedback: Text('draging'),
child: Text('drag me'),
//data: "123"
),
Positioned(
top: 30,
child: DragTarget(
onWillAccept: (data) {
print("data = $data onWillAccept");
return true;
},
onAccept: (data) {
print(" onAccept");
setState(() {
isVisible = true;
targetText = "data";
});
},
onLeave: (data) {
print("data = $data onLeave");
},
builder: (context, candidateData, rejectedData) {
return Container(
width: 150.0,
height: 150.0,
color: Colors.blue[500],
child: Center(
child: Text(targetText),
),
);
},
)),
Visibility(
visible: isVisible,
child: Positioned(
top: 450,
child: Container(
width: 40,
height: 20,
child: Center(
child: Text('show'),
),
),
),
)
],
),
);
}
}
我正在使用 flutter 构建一个简单的游戏, 我试过下面的代码, 在 dragTarget 运行 onAccept 函数后调用定位小部件...真的不知道为什么不构建小部件。
Positioned(
bottom: 0,
child: DragTarget(
onWillAccept: (data){
print(data);
return true;
},
onAccept: (String value) {
print(caughtValue);
//HERE IS THE THING I WANT TO BUILD
Positioned(
child: Container(
width: 50,
height: 50,
child: Center(
child: Text('data'),
),
),
);
setState(() {
caughtValue = value;
});
},
如果您能提供帮助,我们将不胜感激。
您可以复制粘贴运行下面的完整代码
您可以使用 Visibility
包裹 Positioned
并放在 Stack
之下
当 onAccept
将 isVisible
更改为 true
代码片段
Stack(
alignment: Alignment.center,
children: <Widget>[
Draggable(
feedback: Text('draging'),
child: Text('drag me'),
),
Positioned(
top: 30,
child: DragTarget(
onAccept: (data) {
print(" onAccept");
setState(() {
isVisible = true;
targetText = "data";
});
},
...
Visibility(
visible: isVisible,
child: Positioned(
top: 450,
...
工作演示
完整代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new Scaffold(
appBar: new AppBar(
title: new Text("DraggableDemo"),
),
body: Drag2TargetPage()),
);
}
}
bool isVisible = false;
class Drag2TargetPage extends StatefulWidget {
@override
_Drag2TargetPageState createState() => _Drag2TargetPageState();
}
class _Drag2TargetPageState extends State<Drag2TargetPage> {
var targetText = "Target";
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Draggable(
feedback: Text('draging'),
child: Text('drag me'),
//data: "123"
),
Positioned(
top: 30,
child: DragTarget(
onWillAccept: (data) {
print("data = $data onWillAccept");
return true;
},
onAccept: (data) {
print(" onAccept");
setState(() {
isVisible = true;
targetText = "data";
});
},
onLeave: (data) {
print("data = $data onLeave");
},
builder: (context, candidateData, rejectedData) {
return Container(
width: 150.0,
height: 150.0,
color: Colors.blue[500],
child: Center(
child: Text(targetText),
),
);
},
)),
Visibility(
visible: isVisible,
child: Positioned(
top: 450,
child: Container(
width: 40,
height: 20,
child: Center(
child: Text('show'),
),
),
),
)
],
),
);
}
}