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

问题描述

我有一张图片，我想在上面放置小图片。我已经有了这些图像相对于原始图像的位置（宽度、高度、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,)),])

我怎样才能相对于图像放置我的图像（矩形）？ 我还想相对于原始图像缩放这些图像的宽度和高度，并允许它们在缩放时与原始图像一起移动..

知道如何做到这些吗？

谢谢！

解决方法

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"),],);
  }
}

,

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

签出以下代码：

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,Container(
                  color: Colors.indigo,height: 200,)
          ],);
  }

}