为什么小部件跨行小部件的列绘制答案

【问题标题】：Why does widget draws across columns of a Row widget为什么小部件跨行小部件的列绘制
【发布时间】：2021-02-11 22:33:27
【问题描述】：

此网络应用使用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())
  ])

当我将widget 移动到一个MultiChildLayoutDelegate 内时，使用鼠标绘制一个矩形，该矩形在右列上方越过左列。

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

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

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

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

【问题讨论】：

一些可重现的代码示例会很好
关闭？嘿，伙计们，这篇文章有什么不好的地方？
也许是ClipRect？
@Abion47 谢谢！完美的提示！

标签： flutter flutter-layout flutter-web

【解决方案1】：

我希望Row 将其几个孩子的绘图限制在各自的屏幕区域。事实上，它没有。

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

代码：

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

结果：

【讨论】：