flutter - 在 Flutter 堆栈中动态定位小部件

Question

我正在尝试创建一个由背景图像组成的视图，其中小部件动态定位在该图像上的某些位置，每个小部件都有一个 x 和 y，需要针对不同的屏幕和不同的图像尺寸进行计算。

到目前为止，我所做的是在堆栈中显示图像并制作一个小部件列表，其中每个小部件类型都被检查，然后创建一个与之对应的颤振小部件，将其添加到此列表并将其显示在堆栈中的图像上，但是我正在寻找一种更清洁的方法来创建这种行为，在旋转屏幕时，小部件也没有放置在正确的位置，

感谢您的时间。

Answer 1

您可以执行以下操作：

Stack(
   children: [
     Image.asset('YOUR IMAGE HERE', fit: BoxFit.cover), // this is your bg image,
     ..List.generate(imagesCollection.length, (index) {
        
        // you could encapsulate all this logic in a separate widget

        var img = imagesCollection[index];
        var r = Random();
        
        // make sure to stay within the bounds of your screen
        var screenWidth = MediaQuery.of(context).size.width;
        var screenHeight = MediaQuery.of(context).size.height;

        var randomX = r.nextInt(screenWidth);
        var randomY = r.nextInt(screenHeight);

        // before you position the image, check that is within the bounds
        // check if the randomX - IMAGE_WITH is less than the screen width, same for the height
        return Positioned(
          top: randomY,
          left: randomX,
          child: Image.asset(img, width: IMAGE_WIDTH, height: IMAGE_HEIGHT)
        );
     }
   ]
)

这些线周围的东西。