如何在 Flutter 中相对于另一个小部件定位小部件？

Question

我有一个图像，我想在上面放置小图像。我已经有了这些图像相对于原始图像的位置（宽度、高度、topLeftX、topLeftY、bottomRight..）。

我无法相对于图像放置这些小图像（由下面所附示例中的蓝色框表示）。它们始终相对于整个屏幕定位。

这是我尝试过的：

      Stack(

            children:[
              
            Positioned(
              top: 245,
              left: 43,
             width: 200,height: 200,child:Container(color:Colors.blue)),
          Container(

              child:PhotoView(imageProvider: AssetImage("lib/assets/3D_example_2.png"),
          controller: controller,

          )),])

如何相对于图像放置图像（矩形）？我还想相对于原始图像缩放这些图像的宽度和高度，并允许它们在缩放时随原始图像一起移动。

知道如何做到这些吗？

谢谢！

Answer 1

我建议将盒子的宽度和高度添加到容器小部件中，但除此之外，您的代码似乎没有问题。所以我认为该行为可能与父小部件有关：

检查以下代码：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(home: HomePage(),
    theme: ThemeData.light()
  ),
);
class HomePage extends StatefulWidget {

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Stack(
              overflow: Overflow.visible,
              children: [
                Positioned(
                  top: 245,
                  left: 43,
                  child: Container(
                    color: Colors.lightGreen,
                    width: 100,
                    height: 100,
                  ),
                ),
                Positioned(
                  top: -50,
                  left: 120,
                  child: Container(
                    color: Colors.redAccent,
                    width: 100,
                    height: 100,
                  ),
                ),
                Container(
                  color: Colors.indigo,
                  width: 200,
                  height: 200,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

}