Question

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

应如何工作：

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

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

向下滚动

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

等

谢谢！

Answer 1

您正在考虑使用ListWheelScrollView。

确切的解决方案是将 ListWheelScrollView.useDelegate 与 ListWheelChildLoopingListDelegate 一起使用。

示例：

const tpPrototype = {
    name: "50TP prototyp",
    avgDamage: 440,
    healthPool: 1500,
    reloadTime: 13.62,
},
tpMarkowskiego = {
    name: "53TP prototyp",
    avgDamage: 420,
    healthPool: 1450,
    reloadTime: 12.18,
},
proggettoM35 = {
    name: "Progetto M35 mod.46",
    avgDamage: 240,
    healthPool: 1400,
    reloadTime: 1,
},

window.onload = function () {
let tankSel = document.getElementById("tankSel");
    typeSel = document.getElementById("typeSel");
    nameSel = document.getElementById("nameSel");

for (let tank in tankObject) {
    tankSel.options[tankSel.options.length] = new Option(tank, tank);
}
tankSel.onchange = function () {
    typeSel.length = 1;
    nameSel.length = 1;
    if (this.selectedIndex < 1) return;
    for (let type in tankObject[this.value]) {
        typeSel.options[typeSel.options.length] = new Option(type, type);
    }
};
tankSel.onchange();
typeSel.onchange = function () {
    nameSel.length = 1;
    if (this.selectedIndex < 1) return;
    let names = tankObject[tankSel.value][this.value];
    for (let i = 0; i < names.length; i++) {
        nameSel.options[nameSel.options.length] = new Option(names[i], names[i]);
    }
};

Answer 2

我一直在努力弄清楚该怎么做。我已经尝试了很多选择，但是使我实现了我想要的和您所要求的那个的是使用插件：

颤动刷卡器（https://pub.dartlang.org/packages/flutter_swiper）。

这是非常可定制的e灵活性。

以下是屏幕截图：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),                
                ),             
            );
          }),
    );
  }
}

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

2 个答案: