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

梦里梦外; 2021-07-24 23:21 946阅读 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 接收组件;
                },
              ),

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

可拖动组件:

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,
                      );
                    },
                  ),
                )
             ],
           ),
        );
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NDU2MA_size_16_color_FFFFFF_t_70]: /images/20210724/c2c19772521645f08eca45e6148c500d.png