在图像顶部添加带有相对位置的标签/标签

Question

我正在构建一个 Instagram 克隆（特别是图像标签功能）。我可以将标签放在用户上传的图像顶部，但是当屏幕尺寸/方向/缩放更改时，标签不会重新定位自己。

谁能告诉我如何实现这一目标并存储标签位置，以便当我在用户源中再次加载图像时，我可以看到图像上的标签。

Answer 1

您可以将图像和标签包装在Column或Stack中。列会将标签和图像放在中间，而使用堆栈时，您可以将图像放在中心并与下面的文本对齐。 列示例：
Column (children: [Image.asset('assets/myasset.png'), Text('My image'), ] ),

 堆栈示例：

Stack(children:[Center(child: Text('My Image')), Align(alignment:Alignment.bottomCenter,child: Image.asset('assets/myasset.png'))]),

Answer 2

示例：

 double screenHeight = MediaQuery.of(context).size.height;
 double screenWidth = MediaQuery.of(context).size.width;

// 示例：根据屏幕高度更改位置

双位置顶部 = 屏幕高度 * 0.3;

// 示例：根据屏幕宽度更改位置

双positionLeft = screenWidth * 0.2;