ListWheelScrollView 滚轮列表

高大上的柱面滑动列表，精妙十足，可指定item高度、透视、挤压等属性，接收滑动时选中事件。

相关组件

CupertinoPicker

ListWheelScrollView基本使用

   <br />【children】 : 子组件列表   【List<Widget>】<br />【perspective】 : 透视度   【double】<br />【itemExtent】 : item高   【EdgeInsets】<br />【onSelectedItemChanged】 : 选中回调  【ValueChanged<int> 】<br />![117.gif](https://cdn.nlark.com/yuque/0/2020/gif/326147/1589454709922-3c960e4c-37fc-49a8-a169-785f3751f053.gif#align=left&display=inline&height=418&margin=%5Bobject%20Object%5D&name=117.gif&originHeight=418&originWidth=810&size=724279&status=done&style=none&width=810)

import 'package:flutter/material.dart';
class CustomListWheelScrollView extends StatefulWidget {
  @override
  _CustomListWheelScrollViewState createState() => _CustomListWheelScrollViewState();
}

class _CustomListWheelScrollViewState extends State<CustomListWheelScrollView> {
  var data = <Color>[
    Colors.orange[50],
    Colors.orange[100],
    Colors.orange[200],
    Colors.orange[300],
    Colors.orange[400],
    Colors.orange[500],
    Colors.orange[600],
    Colors.orange[700],
    Colors.orange[800],
    Colors.orange[900],
  ];

  Color _color = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _buildCircle(),
        Container(
          height: 150,
          width: 300,
          child: ListWheelScrollView(
            perspective: 0.006,
            itemExtent: 50,
            onSelectedItemChanged: (index){
              print('onSelectedItemChanged:$index');
              setState(() => _color=data[index]);
            },
            children: data.map((color) => _buildItem(color)).toList(),
          ),
        ),
      ],
    );
  }

  Widget _buildCircle() => Container(
        margin: EdgeInsets.only(bottom: 5),
        width: 30,
        height: 30,
        decoration: BoxDecoration(
          color: _color,
          shape: BoxShape.circle
        ),
      );

  Widget _buildItem(Color color) {
    return Container(
      key: ValueKey(color)  ,
      alignment: Alignment.center,
      height: 50,
      color: color,
      child: Text(
        colorString(color),
        style: TextStyle(color: Colors.white, shadows: [
          Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
        ]),
      ),
    );
  }

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}