flutter-centerSlice实现.9图片背景

centerSlice：centerSlice的大小要小于图片原始尺寸（最好是1倍图尺寸计算）
一般布局图片会按1倍图尺寸布局，图片原始尺寸- centerSlice 要小于布局大小，否则会报错

wwwww.png

Image.asset(
    'assets/black_square.png',
     height: 100,
     width: 350,
     centerSlice: Rect.fromLTRB(15, 15, 35, 35),
 )

如图，图片尺寸5050，centerSlice大小3535，布局尺寸 350 *100，图片原始尺寸- centerSlice < 布局大小

实现.9的图解

1、第一步，图还未放大，原样显示时。

矩形5是centerSlice: Rect指定的矩形,
此矩形的四条边向外延伸，将图切成9块

---

| 1 | 2 | 3 |

| 4 | 5 | 6 |

| 7 | 8 | 9 |

2、第二步，图已经放大，但空白区域还没有填充时。

这时，切开的9个方框，已挪到位，空白区域等待填充。

---

| 1 | | 2 | | 3 |

---

---

| 4 | | 5 | | 6 |

---

---

| 7 | | 8 | | 9 |

---

3、填充空白区域。
1）四个角，1、3、9、7,大小不变。
2）2，左右拉伸，填充1-2,2-3之间的空白。注意，2是拉伸，不是重复。

3. 4, 上下拉伸，填充1-4,4-7之间的空白。注意，4是拉伸，不是重复。
4. 6，同4。
   5）8，同2。
   6）5，中间的5，也就是centerSlice指定的矩形，上下左右拉伸，填充中间的空白。

---

| 1 | 2 | 3 |

| | | |
| | | |
| | | |
| 4 | 5 | 6 |
| | | |
| | | |
| | | |

---

| 7 | 8 | 9 |

————————————————

image image

这里方块是气泡主体，三角是左上角的拼接，这里方块是48x48

个人使用经验，使用Stack做叠加的时候，两边空出多少位置，就要在外层给加多少padding，不然只显示中间一点，还无法显示