英文:
Show zoomed in part of an image
问题
我想展示一张图片，但只显示其中的一个裁剪部分，放大显示。
目前的显示效果如下：
我希望它的显示效果是这样的：
我想将背景图片放大显示。
我使用flutter_gen_runner来方便地使用资源。
这是显示图片的代码：
Assets.spotifai.defaultArtist.image(
fit: BoxFit.cover,
),
我尝试使用alignment和scale属性，但无法达到我想要的效果。
有什么标准的方法可以实现这个吗？
英文:
I want to show an Image but only a cropped part of it, zoomed in.
This is how it looks right now:
and this is how I want it to look:
I want the background image to be zoomed in.
I use flutter_gen_runner to be able to use Assets easily.
This is my code to show the image:
Assets.spotifai.defaultArtist.image(
fit: BoxFit.cover,
),
I tried using the alignment and scale attribute, but couldn't achieve what I want with that.
What is the canonical way to do this?
答案1
得分: 3
需要将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.none, // 这里修改为BoxFit.none
),
),
),
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, // 这里修改为BoxFit.none
scale: .6, // 在这里调整比例
),
),
),
),
),
],
)
输出：
英文:
You need to set the fit to BoxFit.none and decrease the image scale:
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),
))),
)
],
),
Output:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论