Flutter中PageView.builder如何从当前页跳转至指定偏移的目标页面位置

核心修改点 #

• 在_HomeState中声明你已定义的PageController实例，重写dispose方法释放控制器避免内存泄漏
• 将控制器绑定到PageView.builder的controller属性
• 按钮点击回调中计算目标页码，做边界判断后调用控制器的跳转方法即可

完整修改后代码 #

class Home extends StatefulWidget {
  Home({ Key? key, required this.title,}) : super(key: key);
  final String title;

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  // 声明PageController
  final PageController _controller = PageController(initialPage: 0);

  @override
  void dispose() {
    // 释放控制器，避免内存泄漏
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('stackoverflow'),
      ),
      body: PageView.builder(
        // 绑定控制器
        controller: _controller,
        itemBuilder: (context, position) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(
                'Page' + position.toString(),
              ),
              ElevatedButton(
                  onPressed: () {
                    final currentPage = _controller.page?.round() ?? 0;
                    int targetPage = currentPage + 10;
                    // 边界处理，防止跳转超过最大页码
                    if (targetPage >= 1000) {
                      targetPage = 999;
                    }
                    // 带平滑动画跳转
                    _controller.animateToPage(
                      targetPage,
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeInOut,
                    );
                    // 不需要动画可以直接用jumpToPage
                    // _controller.jumpToPage(targetPage);
                  },
                  child: Text('Jump >> + 10'))
            ],
          );
        },
        itemCount: 1000,
      ),
    );
  }
}

跳转方式说明 #

• animateToPage：会触发平滑的翻页动画，可自定义动画时长和动画曲线，体验更好
• jumpToPage：无动画直接切换到目标页，性能消耗更低

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