如何将单个PageController正确绑定到多个PageView实现同步控制？

核心思路 #

直接让两个PageView绑定同一个PageController实例，Flutter会自动同步它们的滚动偏移和页面切换状态，实现标题与内容页的匹配。

具体实现步骤 #

• 创建并持有PageController：在StatefulWidget的State类中初始化控制器，页面销毁时释放资源，避免内存泄漏。
• 绑定到两个PageView：将同一个控制器分别传给AppBar标题区的PageView和body区的PageView。
• 可选监听页面切换：如果需要在页面切换时执行额外逻辑（比如更新样式），可以给PageController添加监听器。

完整代码示例 #

import 'package:flutter/material.dart';

class SyncPageViewDemo extends StatefulWidget {
  const SyncPageViewDemo({super.key});

  @override
  State<SyncPageViewDemo> createState() => _SyncPageViewDemoState();
}

class _SyncPageViewDemoState extends State<SyncPageViewDemo> {
  late PageController _pageController;

  @override
  void initState() {
    super.initState();
    // 初始化控制器，默认显示第0页
    _pageController = PageController(initialPage: 0);
    
    // 可选：监听页面切换事件，获取当前页面偏移或页码
    _pageController.addListener(() {
      // 示例：打印当前页面的浮点值
      // print(_pageController.page);
    });
  }

  @override
  void dispose() {
    // 销毁控制器，释放资源
    _pageController.dispose();
    super.dispose();
  }

  // 标题列表
  final List<String> _titles = ['首页', '发现', '我的'];
  // 内容页面列表
  final List<Widget> _pages = [
    const Center(child: Text('首页内容')),
    const Center(child: Text('发现内容')),
    const Center(child: Text('我的内容')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: SizedBox(
          width: double.infinity,
          height: kToolbarHeight,
          child: PageView.builder(
            controller: _pageController,
            // 可选：禁止手动滑动标题栏PageView，仅通过内容页控制切换
            // physics: const NeverScrollableScrollPhysics(),
            itemCount: _titles.length,
            itemBuilder: (context, index) {
              return Center(
                child: Text(
                  _titles[index],
                  style: const TextStyle(fontSize: 18),
                ),
              );
            },
          ),
        ),
      ),
      body: PageView.builder(
        controller: _pageController,
        itemCount: _pages.length,
        itemBuilder: (context, index) {
          return _pages[index];
        },
      ),
    );
  }
}

注意事项 #

• 控制器生命周期：必须在initState中初始化，dispose方法中销毁，避免内存泄漏。
• 滑动权限控制：根据需求决定是否允许用户手动滑动标题栏PageView，通过physics参数控制。
• 页面数量一致性：确保两个PageView的itemCount完全一致，避免出现索引越界错误。

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