Flutter 对齐堆栈上相同位置的两个小部件

Question

我在堆栈中有 2 个小部件。其中之一在中心对齐。顶部的小部件是other stack。我想用第一个小部件的顶部和左侧位置显示第二个小部件。这是解释：

黄色区域是我的堆栈。第一个小部件设置为中心（子：myFirstWidget）。我的第二个小部件被引用 from here 它是一个可调整大小的小部件，因此它是另一个堆栈，它的子组件被“定位”。所以我需要为初始化设置顶部和左侧值。但是我的主堆栈已填充页面所以当我将第二个小部件的顶部和左侧设置为 0 时。如下所示。 但我想显示它与居中的孩子的顶部对齐，例如：

我的代码片段：

child: Container(
          color: Colors.red,
          child: Stack(
            children: [
              Center(
                child: Image.file(
                  File("myfilepath"),
                ),
              ),
              ResizableWidget(
                child: Container(
                  color: Colors.blue,
                ),
              ),
            ],
          ),
        ),

Answer 1

您可以使用 Position 小部件调整小部件的位置，如下所示：

Positioned(
           child: ResizableWidget(
                    child: Container(
                           color: Colors.blue,
                           ),
                  ),
           top: 80,
           right: -5, 
),

top 和 right 的值只是随机值，你应该检查什么适合你！

Answer 2

您应该将 Center 设为 Stack 的父级。

由于Center，Stack将定位在其父级的中心，它将获取其最大子级的尺寸（高度和宽度），并根据对齐值定位其他子级。

编辑：我修改了代码以包含 placeHolder 图像。在这里，我给了它一个 6000x2000 的大小，但您可以将其更改为您想要的任何值。代码按预期工作，请参阅下面的捕获。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: Stack(
        alignment: AlignmentDirectional.topStart,
        children: [
          Image.network('https://via.placeholder.com/6000x2000'),
          SizedBox(
              height: 50,
              width: 50,
              child: Container(
                color: Colors.green,
              ))
        ],
      ),
    ),
  );
}