![](https://img-blog.csdnimg.cn/20200229195429969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

## 基礎用法

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

![](https://img-blog.csdnimg.cn/20200229154235439.gif)

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

![](https://img-blog.csdnimg.cn/20200229164106484.gif)

## 放大鏡

透過`useMagnifier`和`magnification`屬性實現放大鏡效果，`useMagnifier`是否啟用放大鏡，`magnification`屬性是放大倍率，用法如下：
```
ListWheelScrollView(
      itemExtent: 150,
      useMagnifier: true,
      magnification: 1.5,
      children: <widget>[

],
    );
```
效果如下：

![](https://img-blog.csdnimg.cn/20200229165538399.gif)

## squeeze

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

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

],
    );
```

### 更多相關閱讀：

- [Flutter系列文章總覽](https://blog.csdn.net/mengks1987/article/details/84868953)
- [Flutter Widgets 之 Expanded和Flexible](https://mengqd.blog.csdn.net/article/details/104414251)
- [Flutter Widgets 之 AnimatedList ](https://blog.csdn.net/mengks1987/article/details/103689129)
- [Flutter Widgets 之 SliverAppBar](https://blog.csdn.net/mengks1987/article/details/104031790)

##### 如果這篇文章有幫助到您，希望您來個“贊”並關注我的公眾號，非常謝謝。
![](https://img-blog.csdnimg.cn/2020012208322494.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9tZW5ncWQuYmxvZy5jc2RuLm5ldA==,size_16,color_FFFFFF,t_70)</widget></widget></widget></widget></widget></widget>

Flutter Widgets 之 ListWheelScrollView

相關文章