Как реализовать виджет списка прокрутки велосипедного колеса

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

Answer 2

Я пытался понять, как это сделать. Я перепробовал множество вариантов, но тот, который заставил меня достичь того, чего я хотел и о чем вы просили, использовал плагин:

Флаттер 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),                
                ),             
            );
          }),
    );
  }
}