zoukankan      html  css  js  c++  java
  • 拖拽控件

    接收器代码:

    import 'package:flutter/material.dart';

    import 'draggable_widget.dart';

    class DraggableDemo extends StatefulWidget {
    DraggableDemo({Key key}) : super(key: key);

    @override
    _DraggableDemoState createState() => _DraggableDemoState();
    }

    class _DraggableDemoState extends State<DraggableDemo> {

    Color _draggableColor = Colors.grey;

    @override
    Widget build(BuildContext context) {
    return Scaffold(
    body: Stack(//可重叠
    children: <Widget>[
    DraggableWidget(//发送控件
    offset: Offset(80, 80),
    widgetColor: Colors.orange,
    ),
    DraggableWidget(
    offset: Offset(200, 80),
    widgetColor: Colors.red,
    ),
    Center(//拖拽接收器
    child: DragTarget(
    onAccept: (Color color){//接收条件
    _draggableColor = color;
    }, builder: (context,candidateData,rejectedData){//固定写法
    return Container(//接收控件
    200,
    height: 200,
    color: _draggableColor,
    );
    },
    ),

    )
    ],
    ),
    );
    }
    }
     
    发送器(拖拽器)代码:
    import 'package:flutter/material.dart';

    class DraggableWidget extends StatefulWidget {
     

    final Offset offset;
    final Color widgetColor;
    const DraggableWidget({Key key,this.offset,this.widgetColor}):super(key:key);
    @override
    _DraggableWidgetState createState() => _DraggableWidgetState();
    }

    class _DraggableWidgetState extends State<DraggableWidget> {
    Offset offset = Offset(0.0, 0.0);
    @override
    void initState() {
     
    super.initState();
    offset = widget.offset;//取传进来的offset
    }
    @override
    Widget build(BuildContext context) {
    return Positioned(
    left: offset.dx,
    top: offset.dy,

    child: Draggable(//可拖动的组件
    data: widget.widgetColor,//传递xxx给接收器 xxx此处为颜色 此处要和接收器的onAccept 相对应
    child: Container(
    100.0,
    height: 100.0,
    color: widget.widgetColor,//传递过来的颜色
    ),
    feedback: Container(
    120,
    height: 120,
    color: widget.widgetColor.withOpacity(0.5),//半透明
    ),//当拖动的时候的样式

    onDraggableCanceled: (Velocity velocity,Offset offset){
    setState(() {
    this.offset = offset;//拖动结束
    });

    },//拖拽完成
    ),
    );
    }
    }
    总结:
     

    //拖拽控件

    Draggable

    data:xxx  //传递的数据 和 DragTarget 中的onAccept 相呼应

     

    feedback:() 拖拽时的样式

    onDraggableCanceled :()拖拽结束的样式

     

     

     

    DragTarget(

    onAccept:(xxx){//拖拽接受条件

     

     

    },builder:(context,candidateData,rejectedData){

    xxx //接受控件

    }

    )

  • 相关阅读:
    NSAttributedString可以强制转换为NSMutableAttributedString类型吗?下面这代码有什么问题 为什么报错
    jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画
    锋利的jQuery中的事件与动画
    使用jQuery快速高效制作网页交互特效
    Java中abstract和interface的区别
    一期结业KTV项目难点
    类和对象
    循环结构进阶
    Java中的数组
    Java初始化
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12215315.html
Copyright © 2011-2022 走看看