为什么小部件跨 Row 小部件的列绘制

Question

此网络应用使用 Row() 小部件将屏幕分为左侧绘图区和右侧检查器区。

  Row(children: <Widget>[
    Expanded(
      child: DragTarget(
                builder: (context, List<int> candidateData, rejectedData) {
                  return Center(
                      child: CustomMultiChildLayout(
                    delegate: SEditorLayoutDelegate(myModel),
                    children: myModel.allItemsList(), // draws e.g. rectangle
                  ));
                },
               ....
            ),
            VerticalDivider(),
            ConstrainedBox(
              constraints: const BoxConstraints.tightFor( ... ),
              child: PropertyInspector())
  ])

当我在 MultiChildLayoutDelegate 周围移动 widget 时，它使用鼠标绘制了一个矩形，该矩形在右列上方绘制了左列。

在 MultiChildLayoutDelegate 的 performLayout() 方法中，我执行

positionChild(n, Offset(p.x, p.y));
layoutChild(n, BoxConstraints.expand(width: p.width, height: p.height));

显然，这会使矩形绘图小部件与右列重叠。

如何剪裁左栏中的 widget 使其不与右栏重叠？

Answer 1

我希望 Row 将其几个子项的绘图限制在各自的屏幕区域。其实不然。

因此需要将绘图区域包裹在 ClipRect 内，以使每个客户端的绘图都被裁剪到其屏幕区域。

代码：

ClipRect(
  child: Center(
    child: CustomMultiChildLayout(
     delegate: SEditorLayoutDelegate(myModel),
     children: myModel.allItemsList(),
     )
   )
);

结果：

为什么小部件跨 Row 小部件的列绘制

Why does widget draws across columns of a Row widget

flutter

flutter-layout

flutter-web