当前位置：文江博客话题详情

颤音：定位多个小部件或图像

发布于 2025-02-13 03:09:20 字数 265 浏览 0 评论 0原文

我对扑朔迷离是相对较新的，我正在学习。我想完全按照下图实现。图像中的所有组件，例如汽车，概述的城市和背景形状都在单独的PNG文件中。我将不得不将它们结合在一起以获得结果。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

飘逸的'云 2025-02-20 03:09:20

实现这一目标的最方便方法之一是使用堆栈小部件。
将您的PNG-S作为资产导入PubSpec文件（在此处提供有关此信息 htttps> https：htttps：htttps： //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.dev/flutter.dev/flutter/widgetsss /stack-class.html ）

One of the most convenient way to achive this in flutter is to use the Stack widget.
Import your png-s as assets to your pubspec file (more about this here https://docs.flutter.dev/development/ui/assets-and-images),
then fill up your stack with your images and position them
similar to this example.

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>,
            ),
          ),
        )),
  ],
)

More details about Stack(https://api.flutter.dev/flutter/widgets/Stack-class.html)

回复收藏 0 原文

~没有更多了~