Flutter：定位多個小部件或圖像

Question

我對顫振相對較新，我正在學習。 我想完全按照下圖實現。 圖像中的所有組件，例如汽車、輪廓城市和背景形狀都在單獨的 png 文件中。 我必須將它們全部結合起來才能得到結果。

Answer 1

在顫振中實現這一點的最方便的方法之一是使用 Stack 小部件。 將您的 png-s 作為資產導入您的 pubspec 文件（有關此內容的更多信息，請參見https://docs.flutter.dev/development/ui/assets-and-images ），然后用您的圖像填充您的堆棧並將它們定位為類似於這個例子。

Stack(
  children: <Widget>[
    Positioned(
        top: y,
        left: x,
        child: Container(
          height: h,
          width: w,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/<imagename>.png'),
              fit: BoxFit.<x>,
            ),
          ),
        )),
      Positioned(
        top: y2,
        left: x2 ,
        child: Container(
          height: h,
          width: w,
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/<imagename>.png'),
              fit: BoxFit.<x>,
            ),
          ),
        )),
  ],
)

有關 Stack 的更多詳細信息（ https://api.flutter.dev/flutter/widgets/Stack-class.html ）