flutter 可拖动组件Draggable、接收拖动组件容器DragTarget-蒲公英云

flutter 可拖动组件Draggable、接收拖动组件容器DragTarget

梦里梦外; 2021-07-24 23:21 1007阅读 0赞

可拖动组件
    (1)若要组件位置变成拖动后位置,需要配合Positioned组件和Stack组件实现
    (2)若只是可以拖动,但最终组件位置不改变，不使用Positioned组件
    Draggable(
       data:, 拖拽传递的数据，任意类型,对应接收拖动组件的容器的onAccept回调的第一个参数
       feedback:拖动过程中的组件,
       child: 待拖动的组件,
       onDraggableCanceled: (Velocity velocity, Offset offset){
          setState(() {
             第二个参数为拖动过程的动态坐标
          });
       },
     )
接收拖动组件容器 
    DragTarget(
            onAccept:(参数){   当组件拖动到接收组件触发的函数
                      参数为拖动组件data参数的内容
            },
            builder: (context,candidayeData,rejectedData){ 重写builder组件,返回一个组件
              return 接收组件;
            },
          ),

效果图:
在这里插入图片描述
代码示例:

可拖动组件:

import "package:flutter/material.dart";
class Drag extends StatefulWidget { 
//构造器传入坐标和参数
  Drag({ Key key,this.offset,this.widgetColor}) : super(key: key);
  final Offset offset;
  final Color widgetColor;
  @override
  _DragState createState() => _DragState();
}
class _DragState extends State<Drag> { 
  Offset offset=Offset(0.0,0.0);
  @override
  void initState() { 
    // TODO: implement initState
    super.initState();
    //获取继承的状态类的数据
    offset=widget.offset;
  }
  @override
  Widget build(BuildContext context) { 
    return Container(
    //Positioned实现组件位置为鼠标停止位置
       child: Positioned(
         left:offset.dx,
         top:offset.dy,
         child: Draggable(
           //拖拽传递的数据
           data:widget.widgetColor,
           //拖动过程中的组件
           feedback:Container(
             width: 130,
             height: 130,
             color: Colors.red,
           ) ,
           //待拖动组件
           child: Container(
             width: 100,
             height: 100,
             color:widget.widgetColor,
           ),
           //拖动过程回调
           onDraggableCanceled: (Velocity velocity, Offset offset){ 
              setState(() { 
                //第二个参数为拖动的动态坐标
                this.offset=offset;
              });
           },
         ),
       ),
    );
  }
}

接收容器组件:

import "package:flutter/material.dart";
import "drag.dart";
void main()
{ 
  runApp(App());
}
class App extends StatelessWidget{ 
  @override
  Widget build(BuildContext context) { 
    // TODO: implement build
    return MaterialApp(
      home:Scaffold(
        appBar:AppBar(
          title: Text('小案例'),
        ),
        body:Home() ,
      ),
      //去掉右上角的debug贴纸
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue
      ),
      );
  }
}
class Home extends StatefulWidget { 
  @override
  _HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> { 
  Color dragColor=Colors.orange;
  @override
  Widget build(BuildContext context) { 
    return Container(
       child: Stack(
         children: <Widget>[
         //拖动组件
            Drag(offset: Offset(80,80),widgetColor: Colors.yellow,),
            Drag(offset: Offset(180,80),widgetColor: Colors.pink,),
            Center(
              //拖拽接收组件
              child: DragTarget(
              //当组件拖动到该组件触发的回调,参数为拖动组件的data数据内容
                onAccept:(Color color){ 
                  this.dragColor=color;
                },
                //重写方法,表示待接收的组件
                builder: (context,candidayeData,rejectedData){ 
                  return Container(
                    width: 200,
                    height: 200,
                    color: this.dragColor,
                  );
                },
              ),
            )
         ],
       ),
    );
  }
}