前言 ：

各位同學的大家好 ，有段時間沒有給大家更新文章了，最近寫了一個flutter 中拖拽元件的案例實現， 分享給大家，希望能幫助到各位同學學習和工作 ，那麼廢話不多說我們正式開始。

準備工作：

需要安裝flutter的開發環境：大家可以去看看之前的教程：
1 win系統flutter開發環境安裝教程:https://www.jianshu.com/p/152447bc8718
2 mac系統flutter開發環境安裝教程：https://www.jianshu.com/p/bad2c35b41e3

效果圖：

具體實現：

import 'package:flutter/material.dart';
/***
 * 建立人：xuqing
 * 建立時間 ：2020年10月20日20:10:25
 *
 */
class DraggableWidget extends StatefulWidget {
  final Offset offset;
  final Color widgetcolor;
  DraggableWidget({Key key,this.offset,this.widgetcolor}) : super(key: key);
  @override
  _DraggableWidgetState createState() {
    return _DraggableWidgetState();
  }
}
class _DraggableWidgetState extends State<DraggableWidget> {
  Offset offset=Offset(0.0, 0.0);
  @override
  void initState() {
    super.initState();
    offset=widget.offset;
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Positioned(
      left: offset.dx,
      top: offset.dy,
      child: Draggable(
        data: widget.widgetcolor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.widgetcolor,
        ),
        feedback: Container(
          width: 110.0,
          height: 110.0,
          color: widget.widgetcolor.withOpacity(0.5),
        ),
        onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
            this.offset=offset;
          });
        },
      ),
    );
  }
}
 

這邊我們自定義了一個 DraggableWidget 繼承 StatefulWidget元件 我們在定義了2個變數熟悉

  final Offset offset;
  final Color widgetcolor;
  DraggableWidget({Key key,this.offset,this.widgetcolor}) : super(key: key);

Offset 和Color 需要我們在構造方法 例項化的時候傳入

  Offset offset=Offset(0.0, 0.0);
  @override
  void initState() {
    super.initState();
    offset=widget.offset;
  }
 

我們定義一個offset 變數 讓我們 offset=widget.offset; 在初始化賦值 方便我們後面呼叫

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Positioned(
      left: offset.dx,
      top: offset.dy,
      child: Draggable(
        data: widget.widgetcolor,
        child: Container(
          width: 100.0,
          height: 100.0,
          color: widget.widgetcolor
        ),
        feedback: Container(
          width: 110.0,
          height: 110.0,
          color: widget.widgetcolor.withOpacity(0.5),
        ),
        onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
            this.offset=offset;
          });
        },
      ),
    );
  }
 

我們在Widget build 方法裡面 返回一個 Positioned 元件 分別設定 left 和top的 offset 然後在裡面 巢狀一個 Draggable元件 並設定寬高 然後我們設定feedback 屬性

   feedback: Container(
          width: 110.0,
          height: 110.0,
          color: widget.widgetcolor.withOpacity(0.5),
        ),

我們在 onDraggableCanceled 屬性中講返回的offset 賦值給我們定義的 offset

  onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
            this.offset=offset;
          });

這樣我們的拖拽元件 DraggableWidget就定義好了
具體呼叫 ：

 import 'package:flutter/material.dart';
import 'draggable_widget.dart';


class DraggableDemo extends StatefulWidget {
  DraggableDemo({Key key}) : super(key: key);
  @override
  _DraggableDemoState createState() {
    return _DraggableDemoState();
  }
}

class _DraggableDemoState extends State<DraggableDemo> {
   Color  _draggablecolor=Colors.grey;
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Stack(
        children: [
         DraggableWidget(
           offset: Offset(80.0,80.0),
           widgetcolor: Colors.tealAccent,
         ),
          DraggableWidget(
            offset: Offset(180.0,80.0),
            widgetcolor: Colors.redAccent,
          ),
          Center(
            child: DragTarget(
              onAccept: (Color color){
                _draggablecolor=color;
              },
              builder: (context,candidateData,rejectedData){
                return Container(
                  width: 200,
                  height: 200,
                  color: _draggablecolor,
                );
              },
            ),
          )
        ],
      ),
    );
  }
}

最後總結：

flutter裡面提供了比較好拖拽元件的和設定其屬性· 我們只需要按照需求自己封裝就可以實現如上效果，還有更多其他酷炫效果這邊就不展開講了，有興趣的同學可以自己多嘗試， 最後希望我的文章能幫助到各位解決問題 ，以後我還會貢獻更多有用的程式碼分享給大家。各位同學如果覺得文章還不錯 ，麻煩給關注和star，小弟在這裡謝過啦

專案地址：

碼雲 ： https://gitee.com/qiuyu123/flutter_draggabledemo.git

QQ 交流群: