Flutter如何从CarouselSlider轮播组件获取索引绑定DotsIndicator指示器

实现步骤 #

• 首先在当前页面的State类中定义存储轮播当前索引的状态变量

int _currentIndex = 0;

• 为CarouselOptions添加onPageChanged回调，每次轮播页切换时更新状态变量
  onPageChanged回调会返回当前页索引、页切换触发原因两个参数，取索引值调用setState更新状态即可
• 将DotsIndicator的position属性绑定到定义的索引状态变量，同时把dotsCount改为和轮播items的实际数量一致（你现有代码中items只有2个，dotsCount写的5，需要同步修改）

修改后完整代码示例 #

// 先在State类中定义索引变量
int _currentIndex = 0;

// build方法内的布局代码
Padding(
  padding: EdgeInsets.fromLTRB(
      size.width * 0.05, 35, size.width * 0.05, 0),
  child: CarouselSlider(
    options: CarouselOptions(
      aspectRatio: 2.0,
      enlargeCenterPage: true,
      scrollDirection: Axis.horizontal,
      autoPlay: true,
      // 新增onPageChanged回调同步索引
      onPageChanged: (index, reason) {
        setState(() {
          _currentIndex = index;
        });
      },
    ),
    items: [
      Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Image(
          image: AssetImage("assets/greenhouse.jpg"),
        ),
      ),
      Card(
        clipBehavior: Clip.antiAlias,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Image(
          image: AssetImage("assets/greenhouse.jpg"),
        ),
      ),
    ],
  ),
),
DotsIndicator(
  dotsCount: 2, // 和轮播项数量保持一致
  position: _currentIndex.toDouble(), // 绑定索引变量，高版本dots_indicator需要double类型，旧版直接传_intCurrentIndex即可
  decorator: DotsDecorator(
    color: Colors.grey,
    activeColor: greencol, // 未定义greencol可替换为Colors.green等实际使用的颜色
  ),
),

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