這篇文章主要講解了“Flutter Widgets的ListWheelScrollView怎么使用”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Flutter Widgets的ListWheelScrollView怎么使用”吧！

為七里河等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及七里河網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站建設(shè)、七里河網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

基礎(chǔ)用法

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

ListWheelScrollView的用法和ListView基本相同，基礎(chǔ)用法：

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

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),
    );

調(diào)整直徑

ListWheelScrollView的渲染效果類似車輪，設(shè)置diameterRatio調(diào)整其直徑屬性：

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

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

調(diào)整perspective

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

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

offAxisFraction

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

ListWheelScrollView(
      itemExtent: 150,
      offAxisFraction: 13,
      children: [

      ],
    );

offAxisFraction 的值從0到2的效果：

放大鏡

通過useMagnifier和magnification屬性實現(xiàn)放大鏡效果，useMagnifier是否啟用放大鏡，magnification屬性是放大倍率，用法如下：

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

      ],
    );

效果如下：

squeeze

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: [

      ],
    );

感謝各位的閱讀，以上就是“Flutter Widgets的ListWheelScrollView怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Flutter Widgets的ListWheelScrollView怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！