点指示器不起作用 - Flutter - 应该在页面更改时重建指示器

Question

我正在尝试为轮播滑块创建一个点指示器。不知道为什么它根本不重建。简单的图像轮播，底部有一个点指示器，根据轮播上的图像索引进行重建。

代码：

     class Testhome extends StatelessWidget {
  const Testhome({super.key});

  @override
  Widget build(BuildContext context) {
    CarouselController homepagecontroller = CarouselController();
    final SliderController slidercontrollerinstance = SliderController();

    return Scaffold(
        appBar: AppBar(
            title: Text('Welcome Alexander',
                style: ttextthemes.darktheme.headlineMedium),
            automaticallyImplyLeading: false,
            actions: [
              // Search icon button
              IconButton(
                  color: Colors.black,
                  icon: const Icon(Icons.search),
                  onPressed: () {
                    // Show modal search bar using a package or custom implementation
                  })
            ]),
        body: SingleChildScrollView(
            child: Column(children: [
          const SizedBox(height: Tsizes.spacebtwitems),

          //search bar
          const Tsearchbar(text: 'Search in Store'),
          //spacing
          const SizedBox(height: Tsizes.spacebtwitems),
          //heading
          const Theadingbar(
            text: 'Popular categories',
            showbutton: true,
          ),
          //spacing
          const SizedBox(height: Tsizes.spacebtwitems),
          //category icons
          const Homecategories(),
          Padding(
              padding: const EdgeInsets.all(Tsizes.spacebtwitems),
              child: Column(children: [
                CarouselSlider(
                    items: const [
                      CarouselImages(imageurl: Timages.onboardingimage2),
                      CarouselImages(imageurl: Timages.onboardingimage),
                      CarouselImages(imageurl: Timages.onboardingimage3)
                    ],
                    options: CarouselOptions(
                      viewportFraction: 1,
                      autoPlay: true,
                      onPageChanged: (index, reason) {
                        slidercontrollerinstance.updateController(index);
                      },
                    )),
                const SizedBox(height: Tsizes.spacebtwitems),
                Consumer<SliderController>(
                    builder: (context, slidercontrollerinstance, _) {
                  return Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        for (int i = 0; i < picturescarousel.length; i++)
                          Tcircularwidget(
                              hieght: 4,
                              colour: slidercontrollerinstance.currentIndex == i
                                  ? const Color.fromARGB(255, 15, 74, 104)
                                  : Colors.grey)
                      ]);
                })
              ]))
        ]

                // carousel
                )));
  }
}

final List picturescarousel = [
  const CarouselImages(imageurl: Timages.onboardingimage2),
  const CarouselImages(imageurl: Timages.onboardingimage),
  const CarouselImages(imageurl: Timages.onboardingimage3)
];

class SliderController extends ChangeNotifier {
  int _currentIndex = 0;

  int get currentIndex => _currentIndex;

  void updateController(int index) {
    _currentIndex = index;
    notifyListeners();
  }
}

class Tcircularwidget extends StatelessWidget {
  const Tcircularwidget(
      {super.key,
      this.colour = const Color.fromARGB(255, 15, 74, 104),
      this.hieght = 10,
      this.width = 10,
      this.borderradius = Tsizes.boarderradiusLG,
      this.padding = 5,
      this.margin});

  final Color colour;
  final double width, hieght;
  final double borderradius;
  final double padding;
  final EdgeInsets? margin;

  @override
  Widget build(BuildContext context) {
    return Container(
        width: width,
        height: hieght,
        padding: EdgeInsets.all(padding),
        margin: EdgeInsets.only(right: padding),
        decoration: BoxDecoration(
            color: colour,
            borderRadius: BorderRadius.circular(Tsizes.boarderradiusLG)));
  }
}

我不明白为什么它不重建。这只是一个简单的点指示器。应该很简单，我使用的所有资源都表明我做事正确

Answer 1

发生这种情况是因为控制器是在

build

方法中定义的，因此每次小部件重建时它们都会被重新实例化。

要修复它，请将它们从

build

方法中移出。

class Testhome extends StatelessWidget {
  const Testhome({super.key});

  CarouselController homepagecontroller = CarouselController();
  final SliderController slidercontrollerinstance = SliderController();

  @override
  Widget build(BuildContext context) {
    // ...
  }

这如软件包自述文件中的示例所示。