Flutter Widgets 之 ListWheelScrollView

注意：無特殊說明，Flutter版本及Dart版本以下：

• Flutter版本： 1.12.13+hotfix.5
• Dart版本： 2.7.0

基礎用法

在展現大量數據的時候咱們第一會想到使用ListView，若是你以爲ListView比較單1、枯燥，你能夠使用ListWheelScrollView，ListWheelScrollView和ListView同源，但它的渲染效果相似於車輪（或者滾筒），它不是在平面上滑動，而是轉動車輪，先來看一波效果：

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的效果：

放大鏡

經過useMagnifier和magnification屬性實現放大鏡效果，useMagnifier是否啓用放大鏡，magnification屬性是放大倍率，用法以下：

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

      ],
    );
複製代碼

效果以下：

squeeze

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

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

      ],
    );
複製代碼

更多相關閱讀：

• Flutter系列文章總覽
• Flutter Widgets 之 Expanded和Flexible
• Flutter Widgets 之 AnimatedList
• Flutter Widgets 之 SliverAppBar

若是這篇文章有幫助到您，但願您來個「贊」並關注個人公衆號，很是謝謝。