• flutter-拖拽


    Draggable Widget

    Draggable控件负责就是拖拽,父层使用了Draggable,它的子元素就是可以拖动的,子元素可以实容器,可以是图片。用起来非常的灵活。

    参数说明:

    • data: 是要传递的参数,在DragTarget里,会接受到这个参数。当然要在拖拽控件推拽到DragTarget的时候。
    • child:在这里放置你要推拽的元素,可以是容器,也可以是图片和文字。
    • feedback: 常用于设置推拽元素时的样子,在案例中当推拽的时候,我们把它的颜色透明度变成了50%。当然你还可以改变它的大小。
    • onDraggableCanceled:是当松开时的相应事件,经常用来改变推拽时到达的位置,改变时用setState来进行。

    DragTarget Widget

    DragTarget是用来接收拖拽事件的控件,当把Draggable放到DragTarget里时,他会接收Draggable传递过来的值,然后用生成器改变组件状态。

    • onAccept:当推拽到控件里时触发,经常在这里得到传递过来的值。
    • builder: 构造器,里边进行修改child值。
    import 'package:flutter/material.dart';
    import 'draggable_demo.dart';
    
    void main() => runApp(new MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title:'Flutter Demo',
          theme:ThemeData(
            primarySwatch: Colors.blue
          ),
          home:DraggableDemo()
        );
      }
    }
    import 'package:flutter/material.dart';
    import 'draggable_widget.dart';
    
    class DraggableDemo extends StatefulWidget {
      @override
      _DraggableDemoState createState() => _DraggableDemoState();
    }
    
    class _DraggableDemoState extends State<DraggableDemo> {
    
      Color _draggabelColor= Colors.grey;
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Stack(
            children: <Widget>[
              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){ //拖拽接收器 onAccept接收事件
                  _draggabelColor=color;
                },builder: (context,candidateData,rejectedData){
                  return Container(
                     200.0,
                    height: 200.0,
                    color: _draggabelColor,
                  );
                },),
              )
            ],
          ),
        );
      }
    }
    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;
      }
    
      @override
      Widget build(BuildContext context) {
        return Positioned(
          left: offset.dx,
          top: offset.dy,
          child: Draggable(
            data:widget.widgetColor,
            child: Container(
               100.0,
              height: 100.0,
              color: widget.widgetColor,
            ),
            feedback: Container( // 但拖动的时候 子元素的样子
               100.0,
              height: 100.0,
              color: widget.widgetColor.withOpacity(0.5),
            ),
            onDraggableCanceled: (Velocity velocity,Offset offset){ //当松手的时候
              setState(() {
                this.offset=offset;
              });
            },
          ),
        );
      }
    }
  • 相关阅读:
    C++ 类 构造函数 constructor
    数据库——关系代数
    海明码
    C++ this指针
    C++ 类的定义与实现
    C++ 函数 内联函数
    C++ 函数 函数的重载 有默认参数的函数
    2017年第八届蓝桥杯【C++省赛B组】
    2018年第九届蓝桥杯【C++省赛B组】
    C++ 函数 参数传递方式
  • 原文地址:https://www.cnblogs.com/lxz-blogs/p/13253712.html
Copyright © 2020-2023  润新知