如何在颤动中同时滑动两个旋转木马滑块？就像第一个改变第二个一样答案

【问题标题】：How to slide two carousel sliders in flutter at the same time in flutter? as when the first one changes the second does too如何在颤动中同时滑动两个旋转木马滑块？就像第一个改变第二个一样
【发布时间】：2022-11-12 00:28:19
【问题描述】：

尝试制作在第一个更改时更改的并行轮播滑块。我的第一种方法是从第一个中获取索引并在第二个中注入它，但我无法做到这一点。第二种方法是使用相同的控制器，但显然这不起作用。有没有人这样做过，请帮忙。提前致谢。

      SizedBox(
          height: ...,
          width: .... ,
          child: CarouselSlider.builder(
              itemCount: count,
              itemBuilder: (context, index, realIndex) {
                return StationItem(
                    station: allSectors.where((item) => item.iD == selectedSectorId).first.stations![index],
                    stationNumber: index+1,
                    changePage: _changePage,
                    changeTitle: _changeTitle);
              },
              carouselController: stationsCarouselController,
              options: CarouselOptions(
                onScrolled: (index){
                  setState(() => activeIndex = index as int);
                },
                initialPage: 0,
                onPageChanged: (index, reason) {
                  setState(() => activeIndex = index);
                },
                viewportFraction: 1,
                enableInfiniteScroll: true,
                enlargeCenterPage: true,
              )),
        ),
        Column(
          children: [
            SizedBox(
              width: ...,
              height: ...,
            ),
            SizedBox(
                width: ...,
                height: ...,
                child: FittedBox(
                    child: IconButton(
                        onPressed: _next,
                        icon: Image.asset('assets/icons/Right_arrow.png'),
                        splashRadius:...))),
            SizedBox(
              width: ...,
              height: ...,
            ),
          ],
        ),
        SizedBox(
          height: ...,
          width: ...,
        ),
        SizedBox(
            height: ...,
            width: ...,

            child: AbsorbPointer(
              child: CarouselSlider.builder(
                  itemCount: count,
                  itemBuilder: (context, index, realIndex) {
                    return StationLoadingImage(station: allSectors.where((item) => item.iD == selectedSectorId).first.stations![index]);
                  },
                  carouselController: stationsImageCarouselController,
                  options: CarouselOptions(
                    initialPage: activeIndex,
                    onScrolled: null,
                    onPageChanged: null,
                    viewportFraction: 1,
                    enableInfiniteScroll: true,
                    enlargeCenterPage: true,
                  )),
            )
        )

'''

【问题讨论】：

我尝试使用按钮而不是滑动。它在使用“AbsorbPointer”禁用另一个轮播时起作用，因此用户不能滑动另一个轮播，只有第一个的按钮会改变第二个。但是当用第二个不滑动改变第一个时仍然存在问题。请注意，第一个滑块的元素是按钮，因此无法禁用触摸。

标签： flutter dart

【解决方案1】：

    class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
late CarouselController buttonCarouselController =CarouselController(); 

@override 
   void initState() {
buttonCarouselController = CarouselController(length: .., vsync: this);
super.initState();}

@override
    void dispose() {
super.dispose();
_tabController.dispose();

}

 //You can then define both carouselController as 
carouselController:buttonCarouselController

【讨论】：

【解决方案2】：

我和你有同样的问题。然后找到了这个答案： https://stackoverflow.com/a/73162125/16709479 这也对我有用。因此，尝试使用两个控制器：

final CarouselController _controller1 = CarouselController();
final CarouselController _controller2 = CarouselController();

并在按钮中像这样使用它们：

  _controller1.previousPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.linear,
                    );
                    _controller2.previousPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.linear,
                    );

                  //For next page:
    _controller1.nextPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.linear,
                    );
                    _controller2.nextPage(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.linear,
                    );

如果您设置autoplay:false，它会更有帮助

【讨论】：