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

Posted 2023-02-23

【中文标题】如何在 Flutter 中相对于另一个小部件定位小部件？

【英文标题】：how can I position a widget relative to another in Flutter?

【发布时间】：2021-05-15 16:48:55

【问题描述】：

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

          )),])

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

知道怎么做吗？

谢谢！

【参考方案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"),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  

【参考方案2】：

我建议改为将框的宽度和高度添加到 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,
                    width: 100,
                    height: 100,
                  ),
                ),
                Container(
                  color: Colors.indigo,
                  width: 200,
                  height: 200,
                ),
              ],
            )
          ],
        ),
      ),
    );