flutter - 如何实现自行车轮滚动列表小部件

Question

Flutter 有 ListWheelScrollView 小部件，但我想要cycle 滚轮滚动小部件。关于如何实现此类小部件的任何想法。

它应该如何工作:

例如，我有一个包含 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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}