flutter实现图片拉伸点9图

您所在的位置：网站首页 › flutter用法 › flutter实现图片拉伸点9图

flutter实现图片拉伸点9图

2023-05-06 09:12| 来源: 网络整理| 查看: 265

在flutter中，如果相对一张图片进行中间部分拉伸或压缩，实现类似原生点9图的效果，

通过使用DecorationImage对centerSlice属性进行设置可以实现

Container( width: 100.w, height: 150.w, decoration: BoxDecoration( image: DecorationImage( image: AssetImage( Assets.ItemBg, ), centerSlice: const Rect.fromLTRB(25, 25, 75, 125), fit: BoxFit.fill, ), ), child: Text("111"), )

会根据centerSlice对图片设置的对应中间部分进行拉伸,这里设置的是拉伸区域

注意centerSlice的设置需要满足条件，图片的不可拉伸部分需要小于容器大小例如设置的centerSlice为Rect.fromLTRB(left, top, right, bottom), 图片实际尺寸为widthheight，容器尺寸为containerWcontainerH, 需满足

containerW > (width - (right - left) ) containerH > (height - (bottom - top) )

否则会出现如下错误

The following assertion was thrown during paint(): centerSlice was used with a BoxFit that does not guarantee that the image is fully visible. 'package:flutter/src/painting/decoration_image.dart': Failed assertion: line 535 pos 12: 'sourceSize == inputSize'

【本文地址】

flutter实现图片拉伸点9图

flutter实现图片拉伸点9图

今日新闻

推荐新闻