Flutter 显示图像的放大部分

发布于07月07日

我想要显示一个图像，但只是它的一部分，放大裁剪.

现在看起来是这样的:

这就是我想要的样子:

我要把这background image张放大.

我使用flutter_gen_runner是为了能够轻松地使用assets资源 .

这是我用来显示图像的代码:

Assets.spotifai.defaultArtist.image(
    fit: BoxFit.cover,
),

我try 使用alignment和scale属性，但无法实现我想要的效果.

要做到这一点，最规范的方法是什么？

推荐答案

您需要将Fit设置为BoxFit.None并减小图像比例:

Stack(
          alignment: Alignment.center,
          children: [
            SizedBox(
                height: 300,
                width: 300,
                child: Opacity(
                  opacity: .5,
                  child: Image.network(
                    'https://th.bing.com/th/id/OIP.TJDY2Ff5mVD0G8oRYvxjOwHaFC?pid=ImgDet&rs=1',
                    fit: BoxFit.cover,
                  ),
                )),
            const Align(
              alignment: Alignment.center,
              child: SizedBox(
                  height: 200,
                  width: 200,
                  child: DecoratedBox(
                      decoration: BoxDecoration(
                    color: Colors.white,
                    image: DecorationImage(
                        image: NetworkImage('https://th.bing.com/th/id/OIP.TJDY2Ff5mVD0G8oRYvxjOwHaFC?pid=ImgDet&rs=1'), 
                    fit: BoxFit.none, 
                    scale: .6),         
              ))),
            )
          ],
        ),

输出: