您好,登錄后才能下訂單哦!
這篇文章主要講解了“Flutter Widgets的ListWheelScrollView怎么使用”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“Flutter Widgets的ListWheelScrollView怎么使用”吧!
在展示大量數(shù)據(jù)的時候我們第一會想到使用ListView,如果你覺得ListView比較單一、枯燥,你可以使用ListWheelScrollView,ListWheelScrollView和ListView同源,但它的渲染效果類似于車輪(或者滾筒),它不是在平面上滑動,而是轉(zhuǎn)動車輪,先來看一波效果:
ListWheelScrollView的用法和ListView基本相同,基礎(chǔ)用法:
ListWheelScrollView( itemExtent: 150, children: <Widget>[ ... ], );
children
是子控件,itemExtent
指定每一個Item的高度。
當(dāng)有大量數(shù)據(jù)的時候這種方式明顯是不科學(xué)的,就像ListView.builder
一樣,用法如下:
ListWheelScrollView.useDelegate( itemExtent: 150, childDelegate: ListWheelChildBuilderDelegate( builder: (context, index) { return Container( margin: EdgeInsets.symmetric(vertical: 10, horizontal: 30), color: Colors.primaries[index % 10], alignment: Alignment.center, child: Text('$index'), ); }, childCount: 100), );
ListWheelScrollView的渲染效果類似車輪,設(shè)置diameterRatio
調(diào)整其直徑屬性:
ListWheelScrollView( itemExtent: 150, diameterRatio: 1, children: <Widget>[ ... ], )
diameterRatio
是圓筒直徑和主軸渲染窗口的尺寸的比,默認(rèn)值是2
,如果是垂直方向,主軸渲染窗口的尺寸是ListWheelScrollView的高。diameterRatio越小表示圓筒越圓。
perspective
屬性表示圓柱投影透視圖,類似OpenGLES中透視投影,理解為看圓柱的距離,為0
時表示從無限遠(yuǎn)處看,1
表示從無限近處看,值的范圍(0,0.01],注意是左開右閉區(qū)間,默認(rèn)值是0.003
,值越大,渲染效果越圓,用法如下:
ListWheelScrollView( itemExtent: 150, perspective: 0.003, children: <Widget>[ ... ], );
offAxisFraction
屬性表示車輪水平偏離中心的程度,用法如下:
ListWheelScrollView( itemExtent: 150, offAxisFraction: 13, children: <Widget>[ ], );
offAxisFraction
的值從0到2的效果:
通過useMagnifier
和magnification
屬性實現(xiàn)放大鏡效果,useMagnifier
是否啟用放大鏡,magnification
屬性是放大倍率,用法如下:
ListWheelScrollView( itemExtent: 150, useMagnifier: true, magnification: 1.5, children: <Widget>[ ], );
效果如下:
squeeze
屬性表示車輪上的子控件數(shù)量與在同等大小的平面列表上的子控件數(shù)量之比,例如,如果高度為100px,[itemExtent]為20px,那么5個項將放在一個等效的平面列表中。當(dāng)squeeze
為1時,RenderListWheelViewport中也會顯示5個子控件。當(dāng)squeeze
為2時,RenderListWheelViewport中將顯示10個子控件,默認(rèn)值為1,用法如下:
ListWheelScrollView( itemExtent: 150, squeeze: 1, children: <Widget>[ ], );
感謝各位的閱讀,以上就是“Flutter Widgets的ListWheelScrollView怎么使用”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對Flutter Widgets的ListWheelScrollView怎么使用這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關(guān)知識點的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。