Question

我正在尝试使用Draggable小部件来实现可刷卡（类似于Tinder应用）。刷卡效果很好，除了我正在努力弄清楚如何将Draggable的{{1}}的大小设置为与feedback相等。问题在于，容纳child项的Stack小部件具有动态尺寸，具体取决于屏幕尺寸，因此不能将尺寸设置为固定值。

我正在尝试使用LayoutBuilder，希望我可以使用Draggable来获得尺寸，以下是例外RenderBox box = context.findRenderObject() as RenderBox;。阅读文档后，事实证明，无法在RenderBox was not laid out函数中调用获取RenderBox的操作。

另一种选择是使用build，但这并不方便，因为它仅返回呈现应用程序的窗口大小（整个屏幕）。

如果有人能给我一个提示，我将非常感激。

代码：

MediaQuery.of(context).size

Answer 1

更新

请使用LayoutBuilder来构建Draggable。它的构建器函数接收一个约束参数，您可以使用该参数来调整反馈的大小。这样会好得多，因为如果您有一个包含动态数据的列表，那么您将无法始终拥有GlobalKey。

示例：

LayoutBuilder(
  builder: (context, constraints) => Draggable(
    child: Container(...),
    feedback: Container (
      width: constraints.maxWidth,
    )
  ),
);

初始帖子

您可以通过使用Widget的GlobalKey来确定其尺寸。我在GitHub上为ListView发布了此评论，但我认为您可以对Stack使用相同的示例。

ListView.builder(
  itemCount: 25,
  itemBuilder: (BuildContext context, int index) {
    GlobalKey myKey = GlobalKey();
    return Draggable(
      child: ListTile(
        key: myKey,
          title: Text("Tile #$index"),
        ),
        childWhenDragging: Opacity(
          opacity: 0.2,
          child: ListTile(
            title: Text("Tile #$index"),
          ),
        ),
        feedback: FeedbackWidget(
          dragChildKey: myKey,
          child: ListTile(
            title: Text("Tile #$index"),
          ),
       ),
     );
  }
)


class FeedbackWidget extends StatelessWidget{
  final GlobalKey dragChildKey;
  final Widget child;
  const FeedbackWidget({Key key, this.dragChildKey, this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //Determine the size of the original widget
    final RenderBox renderBoxRed = dragChildKey.currentContext.findRenderObject();
    final size = renderBoxRed.size;
    return Container(
      width: size.width,
      height: size.height,
      child: Material(
        child: child,
      ),
    );
  }
}

您也可以查看this Medium article

可拖动的反馈，其大小与孩子相同

1 个答案:

更新

初始帖子