flutter - 如何在 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(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    ),
  );
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Rough  Work",
        ),
        centerTitle: true,
      ),
      body: Stack(
        overflow: Overflow.visible,
        children: [
          Positioned(
            top: 200,
            left: 100,
            child: Container(
              height: 200,
              width: 200,
              color: Colors.teal,
              child: Stack(
                children: [
                  Positioned(
                    top: 12,
                    child: Container(
                      height: 150,
                      width: 150,
                      child: Image(
                        image: NetworkImage(
                            "https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}