Flutter 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   |
-----------------------------

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值