Flutter知識點: Drag

效果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.組合

 

@override
 Widget 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發佈正式版！

做者：老實巴交的讀書人
連接：https://www.jianshu.com/p/410fb2c9da4b
來源：簡書
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。