Flutter中AnimatedSmoothIndicator轮播指示器不更新问题求解

• Flutter开发中使用PageView搭建页面，计划接入AnimatedSmoothIndicator作为轮播指示器
• 为实现自动轮播效果，在PageView内嵌套了CarouselSlider组件
• 实际运行时轮播切换后指示器始终不更新状态，尝试多种排查方式均未解决

原实现代码 #

class FoodPageBody extends StatefulWidget {
  const FoodPageBody({Key? key}) : super(key: key);

  @override
  State<FoodPageBody> createState() => _FoodPageBodyState();
}

class _FoodPageBodyState extends State<FoodPageBody> {
  
  PageController pageController = PageController(viewportFraction: 1);

  int activeIndex = 0;

//------------------------------------------------------------------------------

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 340,
      child: PageView.builder(
          controller: pageController,
          itemCount: 5,
          itemBuilder: (context, position) {
            return _bulidPageItem(position);
          }),
    );
  }

  Widget _bulidPageItem(int index) {
//------------------------------------------------------------------------------
// Slide image 🚩
    return Column(
      children: [
        CarouselSlider(
          options: CarouselOptions(
            onPageChanged: (index, reason) {
              setState(() {
                activeIndex = index;
              });
            },
            enlargeStrategy: CenterPageEnlargeStrategy.height,
            enableInfiniteScroll: true,
            enlargeCenterPage: true,
            autoPlayCurve: Curves.ease,
            autoPlay: true,
            autoPlayInterval: const Duration(seconds: 5),
            height: 320,
          ),
          items: [
            Stack(
              alignment: Alignment.topCenter,
              children: [
                Container(
                  margin: const EdgeInsets.only(left: 5, right: 5),
                  height: 220,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: index.isEven
                        ? const Color(0xFFffd28d)
                        ? const Color(0xFF89dad0),
                    image: const DecorationImage(
                        image: AssetImage('images/chineseFood.jpg'),
                        fit: BoxFit.cover),
                  ),
                ),
//------------------------------------------------------------------------------
// Slide Information 🚩
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    margin:
                        const EdgeInsets.only(left: 20, right: 20, bottom: 15),
                    height: 130,
                    decoration: BoxDecoration(
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey.withOpacity(0.3),
                            blurRadius: 6,
                            spreadRadius: 0.7,
                            offset: const Offset(1, 4))
                      ],
                      borderRadius: BorderRadius.circular(25),
                      color: Colors.white,
                    ),
//------------------------------------------------
// Slider title
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const BigText(
                            text: 'Chinese side',
                          ),
//----------------------------------------------
// Slider Rating
                          const SizedBox(height: 10),
                          Row(
                            children: [
                              Wrap(
                                children: List.generate(
                                  5,
                                  (index) => const Icon(Icons.star,
                                      color: AppColor.mainColor, size: 12),
                                ),
                              ),
                              const SizedBox(width: 10),
                              SmallText(text: 4.5.toString()),
                              const SizedBox(width: 10),
                              const SmallText(text: '1287 comments'),
                            ],
                          ),
                          const SizedBox(height: 20),
//----------------------------------------------
// Slider Icons
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: const [
                              SliderIcons(
                                  color: AppColor.iconColor1,
                                  text: 'Normal',
                                  icon: Icons.circle),
                              SliderIcons(
                                  color: AppColor.mainColor,
                                  text: '1.7km',
                                  icon: Icons.location_pin),
                              SliderIcons(
                                  color: AppColor.iconColor2,
                                  text: '32min',
                                  icon: FontAwesomeIcons.clock),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
//------------------------------------------------------------------------------
// Slider Dots 🚩
        AnimatedSmoothIndicator(
          activeIndex: activeIndex,
          count: 5,
          effect: const WormEffect(),
        )
      ],
    );
  }
}

问题效果截图 #

代码存在3处核心问题，导致指示器无法联动：

1. 组件嵌套逻辑错误：你把CarouselSlider放在PageView.builder的item构建方法中，相当于外层5个PageView页面，每个页面都单独渲染了1个CarouselSlider和1个AnimatedSmoothIndicator。而你给每个CarouselSlider只传了1个轮播子项，永远不会触发内部的onPageChanged回调，activeIndex从初始化后就不会被修改。
2. 语法错误：Container的color属性三元运算符书写错误，第二个分支错误使用了?而非:，会直接导致语法报错。
3. 索引监听对象错误：即使CarouselSlider正常滑动，你定义的PageController也没有绑定任何页码监听逻辑，外层PageView滑动时也不会更新activeIndex。

PageView和CarouselSlider本身都是轮播组件，不需要嵌套使用，二选一即可。如果要使用CarouselSlider的自动轮播能力，直接移除多余的PageView嵌套，把所有轮播项传给CarouselSlider，指示器和CarouselSlider放在同一层级绑定索引即可，修正后的核心代码：

class FoodPageBody extends StatefulWidget {
  const FoodPageBody({Key? key}) : super(key: key);

  @override
  State<FoodPageBody> createState() => _FoodPageBodyState();
}

class _FoodPageBodyState extends State<FoodPageBody> {
  int activeIndex = 0;

  // 构建5个轮播项
  List<Widget> _buildCarouselItems() {
    return List.generate(5, (index) {
      return Stack(
        alignment: Alignment.topCenter,
        children: [
          Container(
            margin: const EdgeInsets.only(left: 5, right: 5),
            height: 220,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              // 修正三元运算符语法
              color: index.isEven ? const Color(0xFFffd28d) : const Color(0xFF89dad0),
              image: const DecorationImage(
                  image: AssetImage('images/chineseFood.jpg'),
                  fit: BoxFit.cover),
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              margin: const EdgeInsets.only(left: 20, right: 20, bottom: 15),
              height: 130,
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: Colors.grey.withOpacity(0.3),
                      blurRadius: 6,
                      spreadRadius: 0.7,
                      offset: const Offset(1, 4))
                ],
                borderRadius: BorderRadius.circular(25),
                color: Colors.white,
              ),
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const BigText(text: 'Chinese side'),
                    const SizedBox(height: 10),
                    Row(
                      children: [
                        Wrap(
                          children: List.generate(
                            5,
                            (starIndex) => const Icon(Icons.star,
                                color: AppColor.mainColor, size: 12),
                          ),
                        ),
                        const SizedBox(width: 10),
                        SmallText(text: 4.5.toString()),
                        const SizedBox(width: 10),
                        const SmallText(text: '1287 comments'),
                      ],
                    ),
                    const SizedBox(height: 20),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: const [
                        SliderIcons(
                            color: AppColor.iconColor1,
                            text: 'Normal',
                            icon: Icons.circle),
                        SliderIcons(
                            color: AppColor.mainColor,
                            text: '1.7km',
                            icon: Icons.location_pin),
                        SliderIcons(
                            color: AppColor.iconColor2,
                            text: '32min',
                            icon: FontAwesomeIcons.clock),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 340,
      child: Column(
        children: [
          CarouselSlider(
            options: CarouselOptions(
              onPageChanged: (index, reason) {
                setState(() {
                  activeIndex = index;
                });
              },
              enlargeStrategy: CenterPageEnlargeStrategy.height,
              enableInfiniteScroll: true,
              enlargeCenterPage: true,
              autoPlayCurve: Curves.ease,
              autoPlay: true,
              autoPlayInterval: const Duration(seconds: 5),
              height: 320,
            ),
            items: _buildCarouselItems(),
          ),
          AnimatedSmoothIndicator(
            activeIndex: activeIndex,
            count: 5,
            effect: const WormEffect(),
          )
        ],
      ),
    );
  }
}

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