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

Question

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

它应该如何工作：

例如，我有一个包含 10 个项目的列表，其中一个选定项目为 1 选定元素位于此元素上方的中心位置，您会看到列表中的最后一个元素位于第二个元素下方

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

向下滚动

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

等等。

谢谢！

Answer 1

考虑 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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}