将 Flutter 小部件转换/平移到其宽度的负 50%答案

【问题标题】：Transform/Translate Flutter widget to negative 50% of it's width将 Flutter 小部件转换/平移到其宽度的负 50%
【发布时间】：2020-11-26 17:18:55
【问题描述】：

假设我们有一个空的父窗口小部件（一个容器），没有大小，并且绝对定位（在它自己的父窗口内）在上/左 (x/y) 坐标处。然后我们在父控件中放置一个子控件（大小可变，事先不知道）。有没有办法将孩子定位在其自身宽度的 -50% 处，以便孩子的水平中心出现在其父母的 x 坐标处？我不想使用全局键，因为会有数百个实例。我已经尝试过 Transform.translate（只接受已知的 x 偏移量）、FractionalOffsets、FractionallySizedBoxes、Alignments 等，但似乎没有做我想要实现的目标。有谁知道解决办法吗？

编辑：展示目标的图像

【问题讨论】：

你能放一张你想要的图片吗？
@Mobina 我更新了我的问题
api.flutter.dev/flutter/widgets/…
@pskink 这正是我想要的。如果您愿意将其变成答案，我会很乐意接受。
太好了，请随时发布自我回答

标签： flutter dart flutter-layout

【解决方案1】：

根据@pskink 的评论，我可以通过结合Positioned 和FractionalTranslation 来实现这一目标

Positioned(
    left: childWidget.x,
    top: childWidget.y,
    child: FractionalTranslation(
        translation: Offset(-0.5, -0.5),
        child: childWidget,
    )
);

【讨论】：

【解决方案2】：

您可以使用align_positioned 包中的AlignPositioned 小部件。

AlignPositioned(
  alignment: Alignment.topLeft,
  moveByChildWidth: -0.5,          //negative 50% of child width
  child: Icon(
    Icons.info,
    size: 200,
  ),
),

编辑：

  Widget build(BuildContext context) {
    return Stack(
      children: [
        Transform.translate(
          offset: Offset(100, 200),
          child: Container(
            child: AlignPositioned(
              alignment: Alignment.topLeft,
              moveByChildWidth: -0.5,
              child: Icon(
                Icons.info,
                size: 100,
              ),
            ),
          ),
        ),
      ],
    );
  }

在没有Container 的情况下也给出相同的结果，即将Transform.translate 本身作为父级。

结果：

【讨论】：

我实际上已经尝试过那个包，但据我所知，它不起作用，因为它要求父级具有定义的大小（在我的情况下它没有）。它给了我一个错误： RenderBox 未布置：_RenderAlignPositionedBox#7e614 relayoutBoundary=up10
我试过你的情况。它不要求父级具有定义的大小。并且能够在没有大小的情况下使用Transform.translate 定位父级。我将编辑答案以包含这部分。
实际上，我设法通过完全删除父容器并直接指定 AlignPositioned 的 dx 和 dy 属性（与 moveByChildWidth 一起）来使其工作。感谢您的回答，它得到了我的支持，但@pskink 的评论实际上更优雅地解决了我的问题，并且不需要外部库。