这是你可以解决这个问题的方法：
首先，使用下面的代码创建一个新的小部件。
这个小部件使用`PageView`，默认情况下会给你一个漂亮的滑动动画，但如果你想要自定义动画，也是可以的。
为了保持子元素的状态，只需在每个子元素的小部件中使用`AutomaticKeepAliveClientMixin`。
```dart
class IndexedStackSlider extends StatefulWidget {
/// 构造函数
const IndexedStackSlider({
super.key,
required this.currentIndex,
required this.children,
});
/// 当前索引
final int currentIndex;
/// 子元素列表
final List children;
@override
State createState() => _IndexedStackSliderState();
}
class _IndexedStackSliderState extends State {
late PageController _pageController;
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: widget.currentIndex);
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
@override
void didUpdateWidget(IndexedStackSlider oldWidget) {
super.didUpdateWidget(oldWidget);
if (oldWidget.currentIndex != widget.currentIndex) {
_pageController.animateToPage(
widget.currentIndex,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
}
@override
Widget build(BuildContext context) {
return PageView.builder(
controller: _pageController,
physics:
const NeverScrollableScrollPhysics(), // 禁用页面之间的滑动
itemCount: widget.children.length,
itemBuilder: (context, index) {
return AnimatedBuilder(
animation: _pageController,
builder: (context, child) {
return Align(
alignment: Alignment.topCenter,
child: child,
);
},
child: widget.children[index],
);
},
);
}
}
```
