Flutter中如何实现CarouselSlider内被点击的图标居中显示

核心通过CarouselController控制轮播跳转，三步即可实现点击图标对齐到轮播中心的需求，逻辑简单易理解：

• 第一步：在当前页面的State类中声明CarouselController实例

final CarouselController _carouselController = CarouselController();

• 第二步：将控制器绑定到你的CarouselSlider组件的controller属性上
• 第三步：在你封装的createIconButton点击回调中，调用控制器的页面跳转方法，点击时直接跳转到当前图标对应的索引即可自动对齐到轮播中心

修改后完整代码参考：

// 声明轮播控制器
final CarouselController _carouselController = CarouselController();

CarouselSlider.builder(
  // 绑定控制器
  controller: _carouselController,
  options: CarouselOptions(
    height: 100.0,
    viewportFraction: 0.3,
    initialPage: trackProvider.currentTrack,
    onPageChanged: (index, reason) {
      trackProvider.setCurrentTrackById(widget.sortedTracks[index].id);
      trackProvider.setCurrentPiece(0);
      timer.restartTimer();
      setState(() {
        _currentTrack = index;
      });
    },
  ),
  itemCount: track.tracksDetails.length,
  itemBuilder: (context, itemIndex, realIndex) {
    return Padding(
        padding: const EdgeInsets.only(top: 20.0),
        child: Transform.scale(
          scale: itemIndex == trackProvider.currentTrack ? 1 : 0.5,
          child: createIconButton(
            trackProvider.tracksDetails[itemIndex]['icon'],
            itemIndex,
            widget.sortedTracks,
            trackProvider,
            // 新增点击逻辑，如果你的createIconButton已有点击参数，直接把这段逻辑写入原有回调即可
            onPressed: () {
              _carouselController.animateToPage(
                itemIndex,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              );
            },
          ),
        ));
  },
);

原有onPageChanged里的状态同步逻辑不需要修改，滑动切换和点击切换的状态会自动保持一致。

内容的提问来源于stack exchange，提问作者Mor M Ben