操作背景图像中容器中的子图像

Question

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

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

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

这是我当前的应用程序的外观：

这是代码：

Answer 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,
          ),
        ),
      ),
    );
  }
}

Answer 2

1. 您可以使用 Fractionaloffset 或 FractionallySizedBox

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

或者
您可以使用 https://velocityx.dev/docs/padding 插件并以百分比形式给出顶部填充或者
上下文.屏幕高度*0.4