效果GIF

drag.gif

需求

1. 7个可拖拽的色块
2. 1个固定的随机颜色色块
3. 同色块则计分

实现需要的Widget

1. Draggable ：一个可以被拖拽到DragTarget的widget
2. DragTarget：一个用来接收被拖拽的Draggable的widget
3. Positioned：定位

拆解

1.可拖拽的色块

return Positioned( left: pos.dx, top: pos.dy, child: Draggable( data: widget.dragModel, child: Container( width: drag_item_height, height: drag_item_height, color: widget.dragModel.itemBgColor, child: Center( child: Text( widget.dragModel.itemName, style: TextStyle( color: Colors.white, decoration: TextDecoration.none, fontSize: 12.0, ), ), ), ), onDraggableCanceled: (velocity, offset) { if (!mounted) return; setState(() { //坐标是根据全屏算的，需要计算appbar和statusBar的高度double dx = offset.dx; double dy = offset.dy - appBarHeight - statusBarHeight;//临界点判断 if (dx < 0) { dx = 0.0; }if (dx > screenWidth - drag_item_height) { dx = screenWidth - drag_item_height; }if (dy < 0) { dy = 0.0; }if (offset.dy + drag_item_height > screenHeight) { dy = screenHeight - drag_item_height - appBarHeight - statusBarHeight; }pos = new Offset(dx, dy);}); }, feedback: Container( width: drag_item_height, height: drag_item_height, color: widget.dragModel.itemBgColor.withOpacity(0.5), child: Center( child: Text( widget.dragModel.itemName, style: TextStyle( color: Colors.white, decoration: TextDecoration.none, fontSize: 14.0, ), ), ), ), ));

2.随机色块，接收被拖拽的色块

@override Widget build(BuildContext context) { return Positioned( right: 0.0, child: DragTarget( onAccept: (DragModel model) { if (model.itemBgColor == _curRandomColor) { _score++; } }, builder: ( BuildContext context, List<dynamic> accepted, List<dynamic> rejected, ) { return Container( width: 200.0, height: 200.0, decoration: BoxDecoration( color: _curRandomColor, ), child: Center( child: Text( "放入正确的颜色\n您的得分：$_score", style: new TextStyle(fontSize: 16.0, color: Colors.white), ), ), ); }, ), ); } 

3.组合

@overrideWidget build(BuildContext context) {return new Scaffold(appBar: _buildAppbar(),body: new Stack(children: <Widget>[new DragItem(new DragModel(Offset(0.0, 0.0), '红', Colors.red)),new DragItem(new DragModel(Offset(0.0, 1 * drag_item_height), '橙', Colors.orange)),new DragItem(new DragModel(Offset(0.0, 2 * drag_item_height), '黄', Colors.yellow)),new DragItem(new DragModel(Offset(0.0, 3 * drag_item_height), '绿', Colors.green)),new DragItem(new DragModel(Offset(0.0, 4 * drag_item_height), '青', Colors.indigoAccent)),new DragItem(new DragModel(Offset(0.0, 5 * drag_item_height), '蓝', Colors.blue)),new DragItem(new DragModel(Offset(0.0, 6 * drag_item_height), '紫', Colors.purple)),new DragDestination(),],),);} 

已有项目集成到Flutter代码已经上传到我的GITHUB

知乎日报Flutter版代码已经上传到我的GITHUB

基础学习过程中的代码都放在GITHUB

每天学一点，学到Flutter发布正式版！

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17535.html