Flutter 拖拽控件Draggable

Flutter提供了強大的拖拽控件，可以靈活定制，並且非常簡單。下面作一個拖拽的案例。

Draggable Widget

Draggable控件負責就是拖拽，父層使用了Draggable，它的子元素就是可以拖動的，子元素可以實容器，可以是圖片。用起來非常的靈活。

參數說明：

• data: 是要傳遞的參數，在DragTarget里，會接受到這個參數。當然要在拖拽控件推拽到DragTarget的時候。
• child:在這里放置你要推拽的元素，可以是容器，也可以是圖片和文字。
• feedback: 常用於設置推拽元素時的樣子，在案例中當推拽的時候，我們把它的顏色透明度變成了50%。當然你還可以改變它的大小。
• onDraggableCanceled:是當松開時的相應事件，經常用來改變推拽時到達的位置，改變時用setState來進行。

Draggable( //拖拽組件
         data:widget.widgetColor,
         child:Container(
           width: 100.0,
           height:100.0,
           color: widget.widgetColor,
         ),
         feedback:Container( //feedback:拖動控件時子元素的樣子
           width: 100.0,
           height:100.0,
           color: widget.widgetColor.withOpacity(0.5),
         ), 
         onDraggableCanceled:(Velocity velocity,Offset offset){  //松手的時候
           setState(() {
             this.offset = offset; 
           });
         },
       ),

DragTarget Widget

DragTarget是用來接收拖拽事件的控件，當把Draggable放到DragTarget里時，他會接收Draggable傳遞過來的值，然后用生成器改變組件狀態。

• onAccept:當推拽到控件里時觸發，經常在這里得到傳遞過來的值。
• builder: 構造器，里邊進行修改child值。

    DragTarget(
               onAccept: (Color color){
                 _draggabColor = color;
               },
               builder: (context, candidateData, rejectedData){
                 return Container(
                   width: 200.0,
                   height: 200.0,
                   color: _draggableColor,
                 );
               },
     ),

完整代碼如下：

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()
    );
  }
}

draggable_demo.dart代碼:

import 'package:flutter/material.dart';
import 'draggable_widget.dart';

class DraggableDemo extends StatefulWidget {
  _DraggableDemoState createState() => _DraggableDemoState();
}

class _DraggableDemoState extends State<DraggableDemo> {
  Color  _draggableColor = Colors.grey;
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(title: Text('拖拽案例')),
       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){
                 _draggableColor = color;
               },
               builder: (context, candidateData, rejectedData){
                 return Container(
                   width: 200.0,
                   height: 200.0,
                   color: _draggableColor,
                 );
               },
             ),
           ),
         ],
       ),
    );
  }
}

draggable_widget.dart代碼:

class DraggableWidget extends StatefulWidget {
  final Offset offset; //位置
  final Color widgetColor; //顏色
  const DraggableWidget({Key key, this.offset, this.widgetColor}):super(key:key);

  _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(
           width: 100.0,
           height:100.0,
           color: widget.widgetColor,
         ),
         feedback:Container( //feedback：拖動控件時子元素的樣子
           width: 100.0,
           height:100.0,
           color: widget.widgetColor.withOpacity(0.5),
         ), 
         onDraggableCanceled:(Velocity velocity,Offset offset){  //松手的時候
           setState(() {
             this.offset = offset; 
           });
         },
       ),
    );
  }
}