如何实现循环轮滚动列表小部件

Question

Flutter 有 ListWheelScrollView 小部件，但我想要 cycle 滚轮滚动小部件。任何想法如何实现这样的小部件。

它应该如何工作：

例如，我有一个包含 10 个项目的列表，而选定的项目是 1 所选元素按中心定位 在此元素上方，您会在第二个元素下方看到列表中的最后一个元素

   [10]
-> [1] <-
   [2]

向下滚动

   [9]
-> [10] <-
   [1]

等等

谢谢！

Answer 1

我一直在试图弄清楚如何做到这一点。我尝试了很多选项，但让我实现我想要的和你要求的就是使用插件：

Flutter Swiper (https://pub.dartlang.org/packages/flutter_swiper)。

它非常可定制和灵活。

截图如下：https://imgur.com/a/ktxU6Hx

我是这样实现的：

 import 'package:flutter/material.dart';

 import 'package:flutter_swiper/flutter_swiper.dart';

class Looping extends StatefulWidget {
  @override
  LoopingState createState() {
    return new LoopingState();
  }
}

class LoopingState extends State<Looping> {

  List<int> numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  List<String> options = ['A', 'B', 'C', 'D'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Infinity Loop Items'),),
      body: Center(
        child: Container(
          height: 100.0,
          child: Row(
            children: <Widget>[
              mySwiper(numbers),
              mySwiper(options),
            ],
          ),
        ),
      ),
    );
  }

  Widget mySwiper(List list) {
    return Expanded(
          child: Swiper(
          itemCount: list.length,
          scrollDirection: Axis.vertical,         
          control: SwiperControl(),
          itemBuilder: (BuildContext context, int index) {
            return  Center(
                child: Text(
                  list[index].toString(),
                  style: TextStyle(fontSize: 20.0),                
                ),             
            );
          }),
    );
  }
}

Answer 2

考虑 ListWheelScrollView 是对的。

确切的解决方案是使用 ListWheelScrollView.useDelegate 和 ListWheelChildLoopingListDelegate。

例子：

import 'package:flutter/material.dart';

const String kTitle = 'Loop Wheel Demo';

void main() => runApp(new LoopWheelDemo());

class LoopWheelDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: kTitle,
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  HomePage({Key key,}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final _style = Theme.of(context).textTheme.display2;
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(kTitle),
      ),
      body: new Center(
        child: new ConstrainedBox(
          constraints: BoxConstraints(
            // Set height to one line, otherwise the whole vertical space is occupied.
            maxHeight: _style.fontSize,
          ),
          child: new ListWheelScrollView.useDelegate(
            itemExtent: _style.fontSize,
            childDelegate: ListWheelChildLoopingListDelegate(
              children: List<Widget>.generate(
                10, (index) => Text('${index + 1}', style: _style),
              ),
            ),
          ),
        ),
      ),
    );
  }
}