Flutter ListWheelScrollView.useDelegate 自动滚动几秒

Question

我想在 flutter ListWheelScrollView.useDelegate 中添加一个自动滚动系统几秒钟。我的 ListWheelChildLoopingListDelegate 正在生成无限小部件循环。

是否可以通过单击按钮使此循环滚动几秒钟？

我的代码在这里：

return Container(
  height: 125,
  width: ScreenSize.width * 0.3,
  child: ListWheelScrollView.useDelegate(
    diameterRatio: 1,
    squeeze: 1.8,
    itemExtent: 75,
    physics: FixedExtentScrollPhysics(),
    onSelectedItemChanged: (index) => print(index),
    childDelegate: ListWheelChildLoopingListDelegate(
      children: List<Widget>.generate(
        slotNames.length,
        (index) => Padding(
          padding: const EdgeInsets.all(3.0),
          child: Container(
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.blue,
              ),
              borderRadius: BorderRadius.circular(10.0),
            ),
            child: Image.asset(
              "assets/$index.png",
              width: double.infinity,
              height: double.infinity,
            ),
          ),
        ),
      ),
    ),
  ),
);

当前状态样本：

Answer 1

非常简单，你只需要为滚动控制器设置 Timer 和一个预定义函数 animateToItem

用初始项声明控制器

final _controller = FixedExtentScrollController(initialItem: 0);

声明定时器

 Timer upperSliderTimer;

import 'dart:async' also for Timer

在我的例子中创建一个函数来启动动画我只是在启动函数中调用它

 void startController() async {
int totalitems = 4; //total length of items
int counter = 0;
if (counter <= totalitems) {
  upperSliderTimer = Timer.periodic(Duration(seconds: 3), (timer) {
    _controller.animateToItem(counter,
        duration: Duration(seconds: 1), curve: Curves.easeInCubic);
    counter++;
    if (counter == totalitems) counter = 0;
  });
}

在initState中调用上述函数

@override
void initState() {
    super.initState();
    startController();
  }

最后 ListWheelScrollView with Delegate

ListWheelScrollView.useDelegate(
                      itemExtent: size.height * 0.4,
                      renderChildrenOutsideViewport: false,
                      controller: _controller,
                      squeeze: 0.7,
                      //useMagnifier: true,
                      childDelegate: ListWheelChildBuilderDelegate(
                          childCount: totalitems,
                          builder: (BuildContext context, int itemIndex) {
                            try {
                              return Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                    boxShadow: [
                                      BoxShadow(
                                        color: Colors.black12,
                                        offset: Offset(2, 3),
                                        blurRadius: 3,
                                        spreadRadius: 3,
                                      )
                                    ],
                                    borderRadius: BorderRadius.circular(5),
                                    image: DecorationImage(
                                      fit: BoxFit.fill,
                                      image: NetworkImage(
                                          'image url'),
                                    ),
                                  ),
                                ),
                              );
                            } catch (e) {
                              return Container(
                                decoration: BoxDecoration(
                                  boxShadow: [
                                    BoxShadow(
                                      color: Colors.black12,
                                      offset: Offset(2, 3),
                                      blurRadius: 3,
                                      spreadRadius: 3,
                                    )
                                  ],
                                  borderRadius: BorderRadius.circular(5),
                                  image: DecorationImage(
                                    fit: BoxFit.fill,
                                    image: AssetImage(
                                        'defualt assets image'),
                                  ),
                                ),
                              );
                            }
                          }),
                    );

Flutter ListWheelScrollView.useDelegate 自动滚动几秒

Flutter ListWheelScrollView.useDelegate Make Auto Scroll for few seconds

mobile-development

flutter

flutter-design