flutter 如何在摆动中同时滑动两个转盘滑块?当第一个改变时,第二个也改变

icnyk63a  于 2022-11-17  发布在  Flutter
关注(0)|答案(2)|浏览(212)

尝试制作平行旋转滑块,当第一个滑块改变时,它也会改变。我的第一种方法是从第一个滑块中提取索引,并将其注入第二个滑块中,但我无法做到这一点。第二种方法是使用相同的控制器,但显然这不起作用。有人这样做过吗?请帮助。提前感谢。

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,
                  )),
            )
        )

'''

wkyowqbh

wkyowqbh1#

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
ecbunoof

ecbunoof2#

我和你有同样的问题。然后找到了这个答案: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设置为

相关问题