flutter实现图片.9图

在flutter中，如果相对一张图片进行中间部分拉伸或压缩，实现类似原生点9图的效果，有点麻烦，下面这种也不是特别完美，细调

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

Container(
      width: 60.w,
      height: 70.w,
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage(
                   Assets.ItemeeeBg,
              ),
               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) )

问题 原始图片太大，导致未缩放也很大：
如果原始图片就很大， 不压缩的部分，不扩大 也显的大。

通过设置 一定比例的宽或高，再设置同比例的 centerSlice。

Container(
        // margin: const EdgeInsets.only(top: 6),
        padding: const EdgeInsets.only(left: 12, right: 12, top: 24, bottom: 12),
        decoration: BoxDecoration(
            image: DecorationImage(
              centerSlice: const Rect.fromLTRB(60 * 0.5,  27*0.5,  85*0.5,  53*0.5),
              image: NetworkImage(url),
              width: 105*0.5
            )
        ),

太小也会出问题，整个差不多大的，带特出箭头的也有问题