如何在颤振中同时滑动颤振中的两个转盘滑块?当第一个改变时，第二个也会改变

Question

尝试制作平行旋转木马滑块，当第一个滑块更改时，该滑块会更改。我的第一种方法是从第一个索引中提取索引，然后在第二个索引中注入，但我没能做到。第二种方法是使用相同的控制器，但显然这不起作用。有人这样做过吗？请帮忙。提前谢谢。

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

''

Answer 1

我和你遇到了同样的问题。然后找到了这个答案：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，它将更有帮助

Answer 2

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