Carousel Slider 垂直重复几乎无限次，而不是一次，没有错误显示

Question

我正在做一个旋转木马滑块，但它自己重复了几乎无限次，而不是在我的主页上显示一次，而且没有我可以处理的错误消息，我不能似乎找到了为什么要这样做，有什么帮助吗？

旋转木马滑块代码：

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

  @override
  _CarouselSliderPageState createState() => _CarouselSliderPageState();
}

class _CarouselSliderPageState extends State<CarouselSliderPage> {
  int activeIndex = 0;

  setActiveDot(index) {
    setState(() {
      activeIndex = index;
    });
  }

  List imageList = [
    "assets/images/mobiles/4.png",
    "assets/images/laptops/1.jpg",
    "assets/images/mobiles/3.png",
    "assets/images/laptops/7.jpg",
    "assets/images/mobiles/6.png",
  ];

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        SizedBox(
          height: 10,
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          child: CarouselSlider(
            options: CarouselOptions(
              autoPlayInterval: Duration(seconds: 4),
              autoPlayCurve: Curves.fastLinearToSlowEaseIn,
              autoPlayAnimationDuration: Duration(seconds: 2),
              viewportFraction: 1.0,
              onPageChanged: (index, reason) {
                setActiveDot(index);
              },
            ),
            items: imageList
                .map(
                  (item) => Center(
                    child: Image.asset(
                      item,
                      fit: BoxFit.cover,
                    ),
                  ),
                )
                .toList(),
          ),
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: 10,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: List.generate(imageList.length, (idx) {
                return activeIndex == idx ? ActiveDot() : InactiveDot();
              })),
        )
      ],
    );
  }
}

class ActiveDot extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 8.0),
      child: Container(
        width: 25,
        height: 8,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    );
  }
}

class InactiveDot extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 8.0),
      child: Container(
        width: 8,
        height: 8,
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    );
  }
}

Carousel Slider的调用class:

Container(
          height: MediaQuery.of(context).size.height,
          child: ListView.builder(
            itemBuilder: (context, index) =>
                CarouselSliderPage(),
          ),
        ),

Answer 1

只需删除 ListView.builder

Container(
  height: MediaQuery.of(context).size.height,
  child: CarouselSliderPage(),
),

Answer 2

ListView.builder 是一个构建器，可以并且将多个 'x' 小部件它像循环一样工作，除非另有说明。

您可以尝试在 listview.builder 中添加一个名为 itemCount: 1 的参数，或者在您的特定情况下添加 'imageList.length'，它会限制您列表中的图片数量。

或者完全删除 listview.builder 并调用

CarouselSliderPage(),

下面的代码示例：

Container(
          height: MediaQuery.of(context).size.height,
          child: ListView.builder(
            itemCount: imageList.length,
            itemBuilder: (context, index) =>
                CarouselSliderPage(),
          ),
        ),

但我会在下面使用这个：

Container(
          height: MediaQuery.of(context).size.height,
          child: CarouselSliderPage(),
        ),

Carousel Slider 垂直重复几乎无限次，而不是一次，没有错误显示

Carousel Slider is repeated almost infinite number of times vertically, instead of once, with no error showing

flutter

flutter-test

flutter-layout

flutter-web