颤音 - 如何调整拟合的容器中图像的位置：boxfit.cover

发布于 2025-02-06 13:40:28 字数 636 浏览 3 评论 0原文

因此，我有一个显示图像的容器，并且图像拟合拟合到容器中：boxfit.cover，这是代码：

Container(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage(
              "assets/images/MojitoImage.png"),
        ),
      ),
    ),

代码的结果将看起来像这样

要将图像的位置稍微改变到底部，以便看起来像这样（叶子上方有一个黑色空间）

有什么解决方案？

原文

so i have a container that displays an image, and the image fitted to the container with fit:BoxFit.cover, here is the code:

Container(
      width: 80,
      height: 80,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        image: DecorationImage(
          fit: BoxFit.cover,
          image: AssetImage(
              "assets/images/MojitoImage.png"),
        ),
      ),
    ),

the result of the code will looks like this

i just want to change the position of the image down a little bit to the bottom, so it can be looks like this (there is a little black space above the leaf)

any solution how to do that?

分享到QQ

分享到微博

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

发布评论

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

好菇凉咱不稀罕他 2025-02-13 13:40:28

尝试对齐：Alignment.Topcenter

回复收藏 0 原文

冷弦 2025-02-13 13:40:28

您可以简单地将图像放置在stack和位置小部件之类的位置：

 Container(
        color: Colors.grey,
        width: 80,
        height: 80,
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            Positioned(
              bottom: 10.0,
              right: 10,
              left: 10,
              child: Icon(Icons.receipt,
                  size: 50.0, color: Colors.greenAccent[400]), //Icon
            ),
          ],
        ),
      ),

You can simply position the image with Stack and Position widget like this:

 Container(
        color: Colors.grey,
        width: 80,
        height: 80,
        child: Stack(
          alignment: AlignmentDirectional.center,
          children: <Widget>[
            Positioned(
              bottom: 10.0,
              right: 10,
              left: 10,
              child: Icon(Icons.receipt,
                  size: 50.0, color: Colors.greenAccent[400]), //Icon
            ),
          ],
        ),
      ),

回复收藏 0 原文

~没有更多了~