美文网首页Flutter教学前端开发那些事儿
Flutter(86):Draggable组件之DragTarg

Flutter(86):Draggable组件之DragTarg

作者: starryxp | 来源:发表于2020-12-03 13:25 被阅读0次

    Flutter教学目录持续更新中

    Github源代码持续更新中

    1.DragTarget介绍

    拖拽目标组件

    2.DragTarget属性

    • builder:candidateData为onWillAccept回调为true时可接收的数据列表,rejectedData为onWillAccept回调为false时拒绝时的数据列表
    • onWillAccept:当拖拽锚点进入DragTarget范围时回调,true时会将Data数据添加到candidateData列表中;false时会将Data数据添加到rejectedData列表中;
    • onAccept:接收Data数据,只有onWillAccept返回true且拖拽结束时拖拽锚点位于DragTarget内才会回调
    • onAcceptWithDetails:跟onAccept一样,只是多了Offset的属性
    • onLeave:拖拽锚点进入DragTarget范围后再离开DragTarget范围时回调
    • onMove:拖拽锚点进入DragTarget范围后在DragTarget范围内移动时回调

    3.使用

      _myText(String s) {
        return Text(
          s,
          style: TextStyle(
            fontSize: 14,
            color: Colors.white,
          ),
        );
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('DragTarget'),
          ),
          body: Container(
            width: double.infinity,
            height: double.infinity,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Positioned(
                  top: 10,
                  left: 10,
                  child: Draggable(
                    data: "aa",
                    child: Container(
                      color: Colors.blue,
                      width: 100,
                      height: 100,
                      child: _myText('aa'),
                    ),
                    feedback: Container(
                      color: Colors.red,
                      width: 100,
                      height: 100,
                      child: _myText('aa'),
                    ),
                  ),
                ),
                Positioned(
                  top: 10,
                  right: 10,
                  child: Draggable(
                    data: "bb",
                    child: Container(
                      color: Colors.blue,
                      width: 100,
                      height: 100,
                      child: _myText('bb'),
                    ),
                    feedback: Container(
                      color: Colors.red,
                      width: 100,
                      height: 100,
                      child: _myText('bb'),
                    ),
                  ),
                ),
                Positioned(
                  child: DragTarget(
                    builder: (BuildContext context, List<String> candidateData,
                        List<dynamic> rejectedData) {
                      print('DragTarget builder');
                      Color c;
                      String s;
                      if (candidateData.isNotEmpty && candidateData.first == 'aa') {
                        c = Colors.amber;
                        s = '接收到aa';
                      } else if (rejectedData.isNotEmpty) {
                        c = Colors.grey;
                        s = '未接收到aa,接收为${rejectedData.first}';
                      } else {
                        s = '只接收aa';
                        c = Colors.cyan;
                      }
    
                      return Container(
                        color: c,
                        width: 100,
                        height: 100,
                        child: _myText(s),
                      );
                    },
                    onWillAccept: (s) {
                      print('onWillAccept $s');
                      if (s == 'aa') {
                        return true;
                      } else {
                        return false;
                      }
                    },
                    onAccept: (s) {
                      print('onAccept $s');
                      ToastUtil.showToast('成功接收到指定数据$s');
                    },
                    onAcceptWithDetails: (DragTargetDetails<String> details) {
                      print('onAcceptWithDetails ${details.data}');
                      print('onAcceptWithDetails ${details.offset}');
                    },
                    onLeave: (s) {
                      print('onLeave $s');
                    },
                    onMove: (DragTargetDetails<dynamic> details) {
                      print('onMove ${details.data}');
                      print('onMove ${details.offset}');
                    },
                  ),
                ),
              ],
            ),
          ),
        );
      }
    
    未拖拽.png 拖拽aa,拖拽锚点未进入DragTarget.png 拖拽aa,拖拽锚点进入DragTarget.png 拖拽bb,拖拽锚点未进入DragTarget.png 拖拽bb,拖拽锚点进入DragTarget.png

    下一节:Draggable组件之LongPressDraggable

    Flutter(87):Draggable组件之LongPressDraggable

    Flutter教学目录持续更新中

    Github源代码持续更新中

    相关文章

      网友评论

        本文标题:Flutter(86):Draggable组件之DragTarg

        本文链接:https://www.haomeiwen.com/subject/yezpwktx.html