从背景图像中的容器操作子图像答案

【问题标题】：Manipulating child image from container within background image从背景图像中的容器操作子图像
【发布时间】：2022-06-27 03:20:24
【问题描述】：

我正在尝试操纵背景图像上方的图像的大小和位置。我尝试设置子图像的高度和宽度，但它没有缩小。

我想要的是缩小子图像（“邻居”）的大小，并将位置从顶部到全屏的 1/4。

对我能做什么有什么建议吗？

这是我当前应用的外观：

代码如下：

【问题讨论】：

请不要发送代码截图。邮政编码作为文本代码。

标签： flutter image background containers resize

【解决方案1】：

你在寻找这样的东西吗？

class HomeView extends StatefulWidget {
  const HomeView({Key? key}): super(key: key);

  @override
  State<StatefulWidget> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage(
              'assets/images/black-rocks.jpeg',
            ),
            fit: BoxFit.fill,
          ),
        ),
        child: FittedBox(
          fit: BoxFit.scaleDown,
          child: Image.asset(
            'assets/images/neighbor-name-and-logo.png',
            width: MediaQuery.of(context).size.height / 4,
          ),
        ),
      ),
    );
  }
}

【讨论】：

非常感谢您的回答。这就是我想要缩小该图像的原因！你能愿意告诉我们它是如何运作的吗？

【解决方案2】：

您可以使用 Fractionaloffset 或 FractionallySizedBox

... 容器（颜色：Colors.blue[200]，对齐方式：FractionalOffset(0.7, 0.6), 孩子：FractionallySizedBox（宽度因子：0.1，高度因子：1/3，孩子：容器（颜色：Colors.red[900]） ), ), ...

或者您可以使用 https://velocityx.dev/docs/padding 插件并以百分比形式给出顶部填充或 context.screenHeight*0.4

【讨论】：

非常感谢。我会尽量与这些方法对齐！