Flutter Transform 将小部件从当前位置转换到另一个位置答案

【问题标题】：Flutter Transform translate a widget from current position to another positionFlutter Transform 将小部件从当前位置转换到另一个位置
【发布时间】：2022-04-21 01:40:38
【问题描述】：

如果我想在我的 Flutter 应用中翻译任何 Widget，我将使用下面的代码。

Transform.translate()

需要平移函数偏移量 (dx,dy)。但我想找到当前小部件的 dx 或 dy 值，以便我可以将小部件从设备上的当前位置稍微移动到左右或上下。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

原来是这样的

如果我这样做

Transform.translate(offset: Offset(-10, 20)

它将其位置从其正常渲染位置向左移动 10 并向下移动 20。

【讨论】：

这是使用静态 dx 和 dy 值。不是问题的答案。

【解决方案2】：

这不是那么容易做到的。您必须使用渲染对象。您可以先复制粘贴 Transform 和 RenderTransform 类。 RenderTransform 覆盖了 paint 方法，其参数 offset 是小部件的本地位置：

  @override
  void paint(PaintingContext context, Offset offset) {
    if (child != null) {
      final Matrix4 transform = _effectiveTransform;
      final Offset childOffset = MatrixUtils.getAsTranslation(transform);
      if (childOffset == null) {
        layer = context.pushTransform(needsCompositing, offset, transform, super.paint, oldLayer: layer);
      } else {
        super.paint(context, offset + childOffset);
        layer = null;
      }
    }
  }

例如，如果它的 X 位置小于 20，我会将小部件移动到 X 上的 0 位置：

    if (child != null) {
      final Matrix4 transform = _effectiveTransform;
      Offset childOffset;
      // Move it to the edge, if X position is less than 20
      if (offset.dx < 20) {
        childOffset = Offset(-offset.dx, 0);
      } else {
        childOffset = MatrixUtils.getAsTranslation(transform);
      }
      if (childOffset == null) {

      ...

然后我会在父部件的小部件中从左侧添加 10 像素的填充，但小部件会粘在左侧：

Container(
  padding: EdgeInsets.only(top: 20, left: 10),
  child: MyTransform.translate(
    offset: Offset.zero,
    child: Container(
      width: 100,
      height: 100,
      color: Colors.red
    )
  ),
),

【讨论】：