flutter无限循环选择器

399 阅读1分钟

因ui设计需要无限循环滚动选择器的样式及功能,百度了一下找不到,就想到这个笨办法很期待大神优化,不想优化也可以直接使用,逻辑就是滑动到头部或者尾巴的时候,控制跳转至中间位置;

```

  FixedExtentScrollController hourSController;
```
@override
void initState() {
  super.initState();
  handleInitData();
}```
```

endlessLoopFunc(allLength,selectIndex,controller,length){
//如果滑动到尾巴则跳回第二组数据
  if ((allLength - selectIndex).abs() < 3 ) {
    controller.jumpToItem(controller.selectedItem - length);
    setState(() {});
  }
//如果滑动到顶部则跳回第二组数据
  if (selectIndex < 3) {
    controller.jumpToItem(controller.selectedItem + length);
    setState(() {});
  }
}
```
handleInitData(){
//选择数据设置成三组相同的
  hours.addAll(defaultHours);
  hours.addAll(defaultHours);
  //初始化controller存在第二组数据
  hourSController = new FixedExtentScrollController(initialItem:hours.indexOf(widget.selectList[0]??"01")+24);
  setState(() {});
}
```
```
```

List<String> hours = [  "01","02","03","04","05","06","07","08","09",  "10","11","12","13","14","15","16","17","18","19",  "20","21","22","23","00",];
```
```
CupertinoPicker.builder(
  selectionOverlay: Container(),
  scrollController: hourSController,
  itemExtent: 66.w,
  offAxisFraction: 0.9,
  onSelectedItemChanged: (int selectIndex) {
    endlessLoopFunc(hours.length,selectIndex,hourSController,defaultHours.length);
    setState(() {});
  },
  childCount: hours.length,
  itemBuilder: (_, index) {
    return hours[index];
  },
)
```

`