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 //接受控件

    }

    )

  • 相关阅读:
    【RobotFramework自动化测试】数据库值验证
    【Python】列表各种操作
    python开发之路之线程、进程、协程
    python开发之路SocketServer
    python开发之路之I/O多路复用
    python开发之路1---多并发Ftp的开发
    python网络编程1
    python面向对象编程(扩展) && python中的反射操作
    python基础5-面向对象编程
    基于python实现的计算器
  • 原文地址:https://www.cnblogs.com/pp-pping/p/12215315.html
Copyright © 2011-2022 走看看