flutter - Flutter中使用child center的stack child的相对定位

Question

我的布局的一部分显示了一个图像，上面有对象。图像和对象位于 Stack 中。对于物体位置，我知道物体中心相对于图像的相对坐标。例如 (0,0) 表示对象中心应位于图像的左上角，(0.23,0.7) 表示“中心位于宽度的 23% 和高度的 70%”。我知道对象的大小，但我不知道将分配给图像的先验大小。

我尝试为此使用 Align 但它不使用对象的中心:例如 Align 与 Alignment(1,1)将对象的右下角放在右下角。然后我尝试添加一个变换以将对象的中心转换为 (0,0)，但这仅适用于右下角，例如，当使用 Alignment(0,0) 在中心对齐时，位置是错误的)。

我想到了使用Positioned 小部件，但是我无法在build 函数中知道图像大小。

如何正确定位我的对象？在下面的例子中，我怎样才能得到以绿色矩形右下角为中心的红色圆圈？ (以一种也适用于其他坐标的方式)

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        AspectRatio(
                          aspectRatio: 1.5,
                          child: Container(
                            color: Colors.green,
                          ),
                        ),
                        Align(
                          alignment: Alignment(1,
                              1), // Should put circle center on bottom-right corner
                          child: Container(
                            width: 100,
                            height: 100,
                            // transform: Matrix4.translationValues(50, 50, 0), // doesn't work except for bottom-right corner
                            decoration: BoxDecoration(
                              color: Colors.red,
                              shape: BoxShape.circle,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Text('Bottom widget'),
              ],
            ),
          ),
          Text('Right widget'),
        ],
      ),
    );
  }
}

Answer 1

这是 pskink 建议的基于 CustomMultichildLayout 的解决方案:

enum _Slot {
  image,
  circle,
}

class MyDelegate extends MultiChildLayoutDelegate {
  final FractionalOffset objectCenter;

  MyDelegate({@required this.objectCenter});

  @override
  void performLayout(Size size) {
    Size imageSize = Size.zero;
    Offset imagePos = Offset.zero;

    if (hasChild(_Slot.image)) {
      imageSize = layoutChild(_Slot.image, BoxConstraints.loose(size));

      // Center the image in the available space
      imagePos = (size - imageSize as Offset) * 0.5;
      positionChild(_Slot.image, imagePos);
    }

    if (hasChild(_Slot.circle)) {
      Size childSize = layoutChild(_Slot.circle, BoxConstraints());
      positionChild(
          _Slot.circle,
          imagePos +
              objectCenter.alongSize(imageSize) -
              childSize.center(Offset.zero));
    }
  }

  @override
  bool shouldRelayout(MultiChildLayoutDelegate oldDelegate) => false;
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          Expanded(
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: Center(
                      child: CustomMultiChildLayout(
                        delegate:
                            MyDelegate(objectCenter: FractionalOffset(1, 1)),
                        children: [
                          LayoutId(
                            id: _Slot.image,
                            // Use AspectRatio to emulate an image
                            child: AspectRatio(
                              aspectRatio: 1.5,
                              child: Container(
                                color: Colors.green,
                              ),
                            ),
                          ),
                          LayoutId(
                            id: _Slot.circle,
                            child: Container(
                              width: 100,
                              height: 100,
                              decoration: BoxDecoration(
                                color: Colors.red,
                                shape: BoxShape.circle,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                Text('Bottom widget'),
              ],
            ),
          ),
          Text('Right widget'),
        ],
      ),
    );
  }
}

传递给委托(delegate)的偏移量可以是任何相对坐标。在上面的示例中，我传递了 (1,1)，因此红色圆圈位于右下角的中心: