如何在Flutter中实现带自动联动指示器的本地图片轮播？

要让dotPosition和轮播自动联动，你需要通过状态管理同步轮播页面的切换状态，具体操作如下：

• 在页面的State类中声明dotPosition变量，初始值设为0：

  int dotPosition = 0;
  

• 配置CarouselOptions，开启自动播放并添加页面切换回调，用来更新dotPosition：

  CarouselOptions(
    autoPlay: true, // 开启自动播放
    onPageChanged: (index, reason) {
      setState(() {
        dotPosition = index; // 同步当前页面索引到dotPosition
      });
    },
    // 可按需添加其他配置，比如autoPlayInterval（自动切换间隔）等
  )
  

• 注意：你的代码里CarouselSlider的items仅1张图片，但DotsIndicator的dotsCount设为4，这会导致指示器显示异常，建议将dotsCount和轮播的图片数量保持一致。

完整的代码示例：

class YourPage extends StatefulWidget {
  const YourPage({super.key});

  @override
  State<YourPage> createState() => _YourPageState();
}

class _YourPageState extends State<YourPage> {
  int dotPosition = 0; // 声明dotPosition变量

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        CarouselSlider(
          options: CarouselOptions(
            autoPlay: true,
            onPageChanged: (index, reason) {
              setState(() {
                dotPosition = index;
              });
            },
          ),
          items: [
            Image.asset('images/pizza.png'),
            // 补充其他图片，数量需与dotsCount一致
            Image.asset('images/burger.png'),
            Image.asset('images/fries.png'),
            Image.asset('images/soda.png'),
          ],
        ),
        DotsIndicator(
          dotsCount: 4, // 和items数量保持一致
          position: dotPosition.toDouble(),
        ),
      ],
    );
  }
}

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