背景图像重叠边缘颤动

【问题标题】：Background image overlapping edges flutter背景图像重叠边缘颤动
【发布时间】：2020-12-08 20:01:26
【问题描述】：

我有一个如图所示的背景图像，它需要与 UI 渲染中所示的边缘重叠，我不确定如何最好地进行。我试过裁剪它并使用BoxFit.fill，但这只会导致我并不真正想要的纵横比发生变化，尤其是在不同尺寸的屏幕上。我在想也许让它在左右重叠一个固定的量，然后根据屏幕大小改变大小以适应它，但不确定如何编码。我已经在列内使用扩展的小部件以及各种类似的方法，但无济于事。

【问题讨论】：

标签： flutter dart

【解决方案1】：

如果您使图像更宽一些，您可以改用BoxFit.fitHeight。这是一个将横向图像拟合到纵向视图的示例。

https://codepen.io/digitaljoni/pen/rNeMzdG

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        decoration: BoxDecoration(
          image: DecorationImage(
            fit: BoxFit.fitHeight,
            image: NetworkImage(
              'https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80',
            ),
          ),
        ),
      ),
    );
  }
}

【讨论】：