扑。将一个 Draggable 项目拖到另一个 Draggable 项目上

Posted

技术标签:

【中文标题】扑。将一个 Draggable 项目拖到另一个 Draggable 项目上【英文标题】:Flutter. Drag a Draggable item onto another Draggable item 【发布时间】:2020-02-06 00:49:36 【问题描述】:

我有下面的板。有一个覆盖(Stack)的 2 x 10 小部件,一些透明的小部件是 DragTargets,在它们上方,相同的宽度和高度有 DraggableDraggable 是包含图像的那些。

我面临的问题是,当我拖动上面的方法时,没有调用下面的 onWillAcceptonAccept 方法。我猜是因为有小部件覆盖它们。

我已经切换了小部件,将 DragTargets 覆盖在 Draggable 上,但现在我无法拖动它们,因为它们位于其他小部件下方。

拖放的所有示例都是从一个地方拖动一个项目并将其放置在另一个位置,一个可拖动,一个拖动目标。我需要一个小部件(或屏幕上的一个区域)既可以拖动又可以拖动目标。我怎么能做到这一点?

这是布局

          Align(
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("images/user_board.jpg"),
                  alignment: Alignment.bottomCenter,
                ),
              ),
              height: _userBoardH,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                      height: _tileH,
                      child: Stack(children: <Widget>[
                        Row(
                          children: _buildSlots(ScreenBoard.FIRST_ROW),
                        ),
                        Row(
                          children: _buildTiles(ScreenBoard.FIRST_ROW),
                        ),
                      ])),
                  Container(
                      height: _tileH,
                      child: Stack(children: <Widget>[
                        Row(
                          children: _buildSlots(ScreenBoard.SECOND_ROW),
                        ),
                        Row(
                          children: _buildTiles(ScreenBoard.SECOND_ROW),
                        ),
                      ])),
                ],
              ),
            ),
            alignment: Alignment.bottomCenter,
          ),

干杯。

编辑

按照帕特里克的建议解决了这个问题。这是解决方案:

Widget _buildTile(Tile widget) 
  return DragTarget<Map>(
    builder: (context, candidateData, rejectedData) 
      return Container(
        child: Draggable<Map>(
          child: _getTile(widget),
          feedback: _getTile(widget),
          childWhenDragging: Container(
            width: widget._dimenW,
            height: widget._dimenH,
          ),
          data: 
            Tile.DATA_TILE_ROW_TYPE: widget._rowType,
            Tile.DATA_TILE_ROW_POS: widget._rowPosition,
            Tile.DATA_TILE_ID: widget._tileId,
          ,
        ),
      );
    ,
    onWillAccept: (data) 
      UDebug.log("onWillAccept");
      return false;
    ,
    onAccept: (data) 
      UDebug.log("onAccept");
    ,
  );

【问题讨论】:

【参考方案1】:

将其包装在 Container() 小部件中,并将图像放入 BoxDecoration() 并使用 child: 属性来保存 Draggable()。

这不会妨碍您的指针事件。

【讨论】:

我太累了,甚至无法弄清楚你刚才说的话。你能用一个简单甚至伪代码的例子来做吗? 我应该在容器中包装什么?

以上是关于扑。将一个 Draggable 项目拖到另一个 Draggable 项目上的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Vue draggable 将组件列表中的项目拖动到另一个组件中的列表?

将图像拖到透明 png 后面

Vue-draggable-next:增加空列表的检测范围

jquery ui sortable + draggable 获取被拖动项目的当前索引

如何将节点从一列div拖到另一列

将 BootstrapVue 与 Vue.Draggable 一起使用?并将项目从列表中删除到 b 表?