溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

Flutter Widgets中ListWheelScrollView的用法

發布時間:2020-05-26 17:16:21 來源:億速云 閱讀:808 作者:鴿子 欄目:移動開發

注意:無特殊說明,Flutter版本及Dart版本如下:Flutter版本: 1.12.13+hotfix.5Dart版本: 2.7.0

基礎用法

在展示大量數據的時候我們第一會想到使用ListView,如果你覺得ListView比較單一、枯燥,你可以使用ListWheelScrollView,ListWheelScrollView和ListView同源,但它的渲染效果類似于車輪(或者滾筒),它不是在平面上滑動,而是轉動車輪,先來看一波效果:

Flutter Widgets中ListWheelScrollView的用法

ListWheelScrollView的用法和ListView基本相同,基礎用法:

ListWheelScrollView(
      itemExtent: 150,
      children: <Widget>[
        ...
      ],
    );

children是子控件,itemExtent指定每一個Item的高度。

當有大量數據的時候這種方式明顯是不科學的,就像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的渲染效果類似車輪,設置diameterRatio調整其直徑屬性:

ListWheelScrollView(
      itemExtent: 150,
      diameterRatio: 1,
      children: <Widget>[
        ...
      ],
    )

diameterRatio是圓筒直徑和主軸渲染窗口的尺寸的比,默認值是2,如果是垂直方向,主軸渲染窗口的尺寸是ListWheelScrollView的高。diameterRatio越小表示圓筒越圓。

調整perspective

perspective屬性表示圓柱投影透視圖,類似OpenGLES中透視投影,理解為看圓柱的距離,為0時表示從無限遠處看,1表示從無限近處看,值的范圍(0,0.01],注意是左開右閉區間,默認值是0.003,值越大,渲染效果越圓,用法如下:

ListWheelScrollView(
      itemExtent: 150,
      perspective: 0.003,
      children: <Widget>[
        ...
      ],
    );

offAxisFraction

offAxisFraction屬性表示車輪水平偏離中心的程度,用法如下:

ListWheelScrollView(
      itemExtent: 150,
      offAxisFraction: 13,
      children: <Widget>[

      ],
    );

offAxisFraction 的值從0到2的效果:

Flutter Widgets中ListWheelScrollView的用法

放大鏡

通過useMagnifiermagnification屬性實現放大鏡效果,useMagnifier是否啟用放大鏡,magnification屬性是放大倍率,用法如下:

ListWheelScrollView(
      itemExtent: 150,
      useMagnifier: true,
      magnification: 1.5,
      children: <Widget>[

      ],
    );

效果如下:

Flutter Widgets中ListWheelScrollView的用法

squeeze

squeeze屬性表示車輪上的子控件數量與在同等大小的平面列表上的子控件數量之比,例如,如果高度為100px,[itemExtent]為20px,那么5個項將放在一個等效的平面列表中。當squeeze為1時,RenderListWheelViewport中也會顯示5個子控件。當squeeze為2時,RenderListWheelViewport中將顯示10個子控件,默認值為1,用法如下:

ListWheelScrollView(
      itemExtent: 150,
      squeeze: 1,
      children: <Widget>[

      ],
    );

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女