FGUI 制作一個(gè)能夠提示當(dāng)前滾動(dòng)狀態(tài)的列表

需求效果:




我們發(fā)現(xiàn)FGUI的 List 在編輯器中沒(méi)有提供相關(guān)的事件來(lái)進(jìn)行此類控制
但是列表的虛化功能和這個(gè)需求非常接近,當(dāng)某一側(cè)還有可以滾動(dòng)的內(nèi)容時(shí),邊緣虛化會(huì)生效,某一側(cè)已經(jīng)抵達(dá)盡頭沒(méi)有可滾動(dòng)內(nèi)容時(shí),盡頭側(cè)的邊緣虛化會(huì)失效
這說(shuō)明FGUI必然能夠支持我們的需求,只是不能僅僅依靠編輯器去實(shí)現(xiàn)了。
閱讀了一些FGUI的代碼,我們能發(fā)現(xiàn),所有的GList都繼承自GComponent
GComponent中有一個(gè)叫做clipSoftness的屬性,也就是邊緣虛化,順著邊緣虛化,我們找到了ScrollPane?它就是實(shí)現(xiàn)這個(gè)需求的關(guān)鍵

首先在fgui中制作一個(gè)控制器

然后為左右的兩個(gè)箭頭綁定對(duì)應(yīng)的控制器狀態(tài)


然后我們可以直接在列表組件下找到scrollPane并添加onScroll的回調(diào)
(列表組件).scrollPane.onScroll.Add();
然后通過(guò)scrollPane.percX得到當(dāng)前滑動(dòng)位置的百分比,為0時(shí)代表滑動(dòng)到了最左側(cè),為1時(shí)代表已經(jīng)滑動(dòng)到了最右側(cè)
于是我們就可以很好的控制兩個(gè)箭頭的狀態(tài)了

自此需求就實(shí)現(xiàn)了。

scrollPane有onScroll和onScrollEnd兩個(gè)回調(diào)
理論上onScrollEnd也可以用,但是onScrollEnd會(huì)需要等待整個(gè)滑動(dòng)完全結(jié)束,甚至包括列表的超出滑動(dòng)范圍的回彈也彈完才展示箭頭,使用體驗(yàn)不是很舒服
onScroll每幀都在檢測(cè),雖然對(duì)性能有負(fù)擔(dān),但體驗(yàn)比較好
留一個(gè)小坑在這里:
假如這個(gè)列表內(nèi)容是動(dòng)態(tài)生成的,有時(shí)長(zhǎng)度足夠滑動(dòng),有時(shí)長(zhǎng)度不足滑動(dòng)時(shí)候,percX會(huì)得到什么數(shù)值呢(手動(dòng)狗頭)