Flutter PageView中如何在Page3.dart按钮内调用pageController.jumpToPage(0)方法
实现方案说明
该操作完全可实现,最简洁的实现方式是通过组件参数传递将父组件中的pageController传入Page3组件使用,具体修改步骤如下:
步骤1:修改Page3.dart,增加PageController参数
调整后完整代码如下,注意jumpToPage为驼峰命名,全小写写法会触发方法不存在的报错:
import 'package:flutter/material.dart'; class Page3 extends StatelessWidget { // 新增接收PageController的必填参数 final PageController pageController; const Page3({Key? key, required this.pageController}) : super(key: key); @override Widget build(BuildContext context) { return Container( alignment: Alignment.center, decoration: const BoxDecoration( color: Colors.red, ), child: ElevatedButton( child: const Text('Button'), onPressed: () { // 直接调用传入的pageController的跳转方法 pageController.jumpToPage(0); }), ); } }
步骤2:修改main.dart,传递pageController参数
需要调整_MyHomePageState中页面列表的初始化逻辑,把父级的pageController传入Page3:
class _MyHomePageState extends State<MyHomePage> { late PageController pageController; int selectedPage = 0; // 去掉提前初始化,改为在initState中生成页面列表 late List<Widget> pagesList; @override void initState() { super.initState(); pageController = PageController(); // 初始化页面列表时传入pageController pagesList = [const Page1(), const Page2(), Page3(pageController: pageController)]; } // 剩余代码无需修改保持原样即可 @override void dispose() { pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: PageView( controller: pageController, children: pagesList, onPageChanged: (index) { setState(() => selectedPage = index); }, ), ); } }
可选替代方案(不推荐)
如果不想通过参数传递,也可以通过上下文查找父级State获取pageController,但该方案耦合度高,父组件类名变更后会直接失效:
// Page3按钮的onPressed中直接写 onPressed: () { final homeState = context.findAncestorStateOfType<_MyHomePageState>(); homeState?.pageController.jumpToPage(0); }
内容的提问来源于stack exchange,提问作者Sharck
相关产品推荐
相关产品推荐

