flutter 抖动:调整浏览器屏幕大小时背景图像移动并与其他元素重叠

zbdgwd5y  于 2023-03-19  发布在  Flutter
关注(0)|答案(1)|浏览(124)

我对flutter很陌生,有一个很基本的疑问:我已经在我的网站上设置了一个背景图片,我正在chrome浏览器上测试输出。当我把浏览器屏幕调整到一个更小的尺寸时,背景图片会与页面上的其他元素重叠。
1.如何固定图像的位置而不考虑屏幕大小(使网站可滚动)?
1.如果屏幕尺寸低于某个尺寸,我可以通过编程方式删除图像吗?
这是我的代码现在的样子:

Widget build(BuildContext context) {
    const String _bgImagePath='assets/images/temp.jpeg';

    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            height: size.height,
            width: size.width,
            decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(_bgImagePath),
                  alignment: Alignment.centerRight,
                  scale: 2.1
              ),
            ),
          ),
          Container(
            height: size.height,
            width: size.width,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                CustomAppBar(),
                Spacer(),
                Body(),
                Spacer(
                  flex: 2,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
fzsnzjdm

fzsnzjdm1#

尝试添加

fit: BoxFit.cover,

它告诉Flutter图像应该总是覆盖整个容器,不管容器比图像尺寸大还是小。

相关问题