在写聊天气泡图或者优惠券背景图之类的需求时,设计师通常只会给出一张通用的切图,再由我们对图片进行局部拉伸来实现不同大小的内容适配。
在iOS中可以用以下的方法进行处理。
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode API_AVAILABLE(ios(6.0)); // the interior is resized according to the resizingMode
那在Flutter中该怎么实现呢,搜索🔍一番后发现提供有centerSlice属性可以满足局部拉伸的需求。
Container(
width: width,
height: height,
decoration: BoxDecoration(
image: DecorationImage(
centerSlice: Rect.fromCenter(
center: Offset(100, 50),
width: 2,
height: 2,
),
scale: window.devicePixelRatio,
image: bgImage,
),
),
child: child,
);