效果GIF

drag.gif

需求

1. 7個可拖拽的色塊
2. 1個固定的隨機顏色色塊
3. 同色塊則計分

實現(xiàn)需要的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(() { //坐標是根據(jù)全屏算的，需要計算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代碼已經(jīng)上傳到我的GITHUB

知乎日報Flutter版代碼已經(jīng)上傳到我的GITHUB

基礎(chǔ)學(xué)習(xí)過程中的代碼都放在GITHUB

每天學(xué)一點，學(xué)到Flutter發(fā)布正式版！

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會在5工作日內(nèi)聯(lián)系您，一經(jīng)查實，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/17535.html