加载中...

Flutter中如何只拉伸图片局部区域


在写聊天气泡图或者优惠券背景图之类的需求时,设计师通常只会给出一张通用的切图,再由我们对图片进行局部拉伸来实现不同大小的内容适配。

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,
    );

文章作者: km
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 km !