如何通过第一页元素在PageView页面菜单中实现页面跳转？

核心逻辑 #

通过PageController控制PageView的页面切换，这是Flutter中PageView页面跳转的标准实现方式。

具体步骤 #

1. 初始化PageController
   在父组件中创建控制器，可指定初始显示页面（默认第一页，索引为0）：

final PageController _pageController = PageController(initialPage: 0);

2. 绑定控制器到PageView
   将控制器传入PageView组件，关联你的页面列表：

PageView(
  controller: _pageController,
  children: const [
    FirstPage(), // 你的第一页组件
    SecondPage(), // 目标跳转页面1
    ThirdPage(), // 目标跳转页面2
  ],
)

3. 在第一页添加跳转触发逻辑
   把PageController通过构造函数传递给第一页组件，然后在需要触发跳转的元素（如按钮、可点击卡片）中调用控制器的跳转方法：

// 第一页组件示例
class FirstPage extends StatelessWidget {
  final PageController pageController;
  
  const FirstPage({super.key, required this.pageController});
  
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: () {
              // 带动画跳转到第二页（索引1）
              pageController.animateToPage(
                1,
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              );
            },
            child: const Text('跳转到第二页'),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // 无动画直接跳转到第三页（索引2）
              pageController.jumpToPage(2);
            },
            child: const Text('直接跳转到第三页'),
          ),
        ],
      ),
    );
  }
}

4. 内存清理
   在父组件销毁时释放控制器资源，避免内存泄漏：

@override
void dispose() {
  _pageController.dispose();
  super.dispose();
}

内容的提问来源于stack exchange，提问作者Charumati