需求背景
在原生開(kāi)發(fā)的時(shí)候,往往會(huì)遇到子視圖超出父視圖的情景,拿ios 舉例,要實(shí)習(xí)這種效果,只需要設(shè)置子視圖相對(duì)父視圖的距離為負(fù)數(shù),就可以實(shí)現(xiàn)上述效果.那么問(wèn)題來(lái)了,在flutter中該如何實(shí)現(xiàn)呢,我們知道Stack是可以實(shí)現(xiàn)堆疊效果的,然后按照原生的思路,編寫(xiě)代碼如下:
Stack(
children: [
Container(
color: Colors.blue,
child: Image.asset(
'lib/asset/image/icon_home_plan_message.png',
width: 36,
height: 36,
fit: BoxFit.cover,
)
),
Positioned(
top: -5,
right: -5,
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
color: Colors.red,
width: 10,
height: 10,
)
)
),
],
)
運(yùn)行后,效果如下:
[圖片上傳失敗...(image-d45244-1719825498463)]
觀察發(fā)現(xiàn),雖然我們這種了小圓點(diǎn)的top和right為負(fù)數(shù),但是并沒(méi)有如我們想象的一樣,小圓點(diǎn)被裁剪掉了,查看Stack源碼后,發(fā)現(xiàn)Stack有clipBehavior屬性,默認(rèn)是Clip.hardEdge,會(huì)將其裁剪,將其改為Clip.none即可,具體代碼如下
Stack(
clipBehavior:Clip.none,
children: [
Container(
color: Colors.blue,
child: Image.asset(
'lib/asset/image/icon_home_plan_message.png',
width: 36,
height: 36,
fit: BoxFit.cover,
)
),
Positioned(
top: -5,
right: -5,
child: ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Container(
color: Colors.red,
width: 10,
height: 10,
)
)
),
],
)
運(yùn)行后的效果如下
[圖片上傳失敗...(image-ac8742-1719825498463)]
最終實(shí)現(xiàn)了我們想要的效果
