当在 Flutter 中的 CarouselSlider 中滑动图像时，我的点指示器不更新

Question

正如你们所阅读的那样，标题没有以某种方式更新。 它只会在我进行热重载时发生，而我不希望那样。 我期待用手指向左或向右滑动图像时，点指示器必须跟随。 请帮助并提前感谢。 这是我的轮播代码和点指示器：

                                         final urlImages1 = [
                                   'https://i.imgur.com/Y3UejT0.jpg',
                                   'https://i.imgur.com/KNFL3qd.jpg',
                                   'https://i.imgur.com/fxAH9HY.jpg',
                                   'https://i.imgur.com/9GkgdKx.jpg',
                                          ];

                                         int currentIndex = 0; 

                                              child: Column(
                                                children: [
                                                  CarouselSlider.builder(
                                                    itemCount:
                                                        urlImages1.length,
                                                    itemBuilder: (context,
                                                        index, realIndex) {
                                                      final urlImage01 =
                                                          urlImages1[index];
                                                      return buildImage(
                                                          urlImage01,
                                                          index);
                                                    },
                                                    options:
                                                        CarouselOptions(
                                                            height: 300,
                                                            enlargeStrategy:
                                                                CenterPageEnlargeStrategy
                                                                    .height,
                                                            enlargeCenterPage:
                                                                true,
                                                            onPageChanged:
                                                                (index,
                                                                    reason) {
                                                              setState(() {
                                                                currentIndex =
                                                                    index;
                                                              });
                                                            }),
                                                  ),
                                                  SizedBox(
                                                    height: 10,
                                                  ),
                                                  dotIndicator(),
                                                ],
                                              ),



  Widget dotIndicator() => AnimatedSmoothIndicator(
    activeIndex: currentIndex,
    count: urlImages1.length,
    effect: JumpingDotEffect(
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.grey,
        activeDotColor: Colors.green),
  );

编辑：简而言之，当我滑动图像时，该图像下的点不会移动。 只有热重载。

Answer 1

假设您像这样创建了小部件。

如果您在此处（在 build 方法内）初始化变量，则每当此小部件中的 state 更改（此处为 currentIndex）时，它将再次调用 build 方法。 这意味着您的所有变量都将使用您分配给它们的值（currentIndex = 0）再次初始化。

import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {

  // here is the right place to initialize your variables if you want to preserve their state after a rebuild
  // int currentIndex = 0; 
  // also your urlImages1 list won't change. so, you should also initialize it here
  //     final urlImages1 = [
  //   'https://i.imgur.com/Y3UejT0.jpg',
  //   'https://i.imgur.com/KNFL3qd.jpg',
  //   'https://i.imgur.com/fxAH9HY.jpg',
  //   'https://i.imgur.com/9GkgdKx.jpg',
  // ];

  @override
  Widget build(BuildContext context) {
    // you should remove these two initializations
    final urlImages1 = [
      'https://i.imgur.com/Y3UejT0.jpg',
      'https://i.imgur.com/KNFL3qd.jpg',
      'https://i.imgur.com/fxAH9HY.jpg',
      'https://i.imgur.com/9GkgdKx.jpg',
    ];

    int currentIndex = 0; 

    return Column(
              children: [
                CarouselSlider.builder(
                  itemCount:
                      urlImages1.length,
                  itemBuilder: (context,
                      index, realIndex) {
                    final urlImage01 =
                        urlImages1[index];
                    return buildImage(
                        urlImage01,
                        index);
                  },
                  options:
                      CarouselOptions(
                          height: 300,
                          enlargeStrategy:
                              CenterPageEnlargeStrategy
                                  .height,
                          enlargeCenterPage:
                              true,
                          onPageChanged:
                              (index,
                                  reason) {
                            setState(() {
                              currentIndex =
                                  index;
                            });
                          }),
                ),
                SizedBox(
                  height: 10,
                ),
                dotIndicator(),
              ],
            );
  }
}
Widget dotIndicator() => AnimatedSmoothIndicator(
    activeIndex: currentIndex,
    count: urlImages1.length,
    effect: JumpingDotEffect(
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.grey,
        activeDotColor: Colors.green),
  );;

我希望这是清楚的。 我创建这个小部件只是为了告诉你把它放在哪里，如果你复制和粘贴它可能不起作用。

Answer 2

您只需要更改 CarouselOptions 的 onPageChanged 事件。

onPageChanged:(index,reason) {
      setState(() {
           currentIndex = index;
      });
}),

对此

onPageChanged:(index,reason) {
      currentIndex = index;
      setState(() {});
}),

初始化后更改您的应用程序 state。

或者您可以使用任何其他 state 管理方法，例如GET 。