Flutter 如何为CarouselSlider设置无需用户操作的5秒间隔垂直自动滚动

解决方案 #

你只需修改CarouselSlider的CarouselOptions配置，补充自动滚动相关参数即可实现需求，修改后的完整代码如下：

Container(
  width: 3000,
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: CarouselSlider(
      options: CarouselOptions(
        height: 150.0,
        // 开启自动滚动，初始化后无需用户操作自动触发
        autoPlay: true,
        // 设置滚动方向为垂直
        scrollDirection: Axis.vertical,
        // 设置自动滚动间隔为5秒
        autoPlayInterval: const Duration(seconds: 5),
        // 可选：用户手动滑动后仍保持自动滚动，不需要可删除该行（默认值为true，即用户操作后停止自动滚动）
        autoPlayDisableOnInteraction: false,
      ),
      items: [1, 2, 3, 4, 5].map((i) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              width: MediaQuery.of(context).size.width,
              margin: EdgeInsets.symmetric(horizontal: 5.0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: greenHex),
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.only(
                        top: 0, right: 10, left: 0, bottom: 8),
                    
                  ),
                ],
              ),
            );
          },
        );
      }).toList(),
    ),
  ),
),

参数说明 #

• autoPlay: true：核心开关，开启后组件加载完成就会自动触发滚动，无需任何用户操作
• scrollDirection: Axis.vertical：将默认的水平滚动改为垂直滚动
• autoPlayInterval: const Duration(seconds: 5)：自定义两次滚动动作的间隔时长，这里设置为5秒
• autoPlayDisableOnInteraction: false：可选配置，开启后即使用户手动滑动了轮播，后续也会继续保持自动滚动

内容的提问来源于stack exchange，提问作者siitaw