Flutter：PageView.builder中TabPageSelector激活页更新异常

手动实现TabPageSelector用于展示PageView.builder的滚动进度，遇到以下问题：

• 不调用setState更新_activePage时，PageView可正常滚动，打印能看到_activePage值变化
• 调用setState更新_activePage后，PageView完全无法滚动

关键问题代码：

_onPageViewChange(int page) {
  setState(() {
    _activePage = page;
  });

  print("Current Page: $_activePage");
}

问题根源 #

核心问题是每次调用setState都会触发整个页面重建，而代码中存在两个重复的StreamBuilder（分别在bottomNavigationBar和body中，都监听同一个Firestore集合），双重监听带来的重复重建会干扰PageView的滚动状态连续性，最终导致滚动手势被中断，表现为无法滚动。

另外，bottomNavigationBar中的StreamBuilder完全没必要独立存在，重复监听不仅浪费资源，还会加剧重建冲突。

解决建议 #

1. 合并重复的StreamBuilder #

将bottomNavigationBar的内容整合到body的StreamBuilder中，避免重复监听Firestore快照，减少不必要的重建。

2. 优化状态更新逻辑 #

确保setState只更新必要的状态，同时调整布局结构，避免独立bottomNavigationBar带来的额外重建干扰。

修改后的完整代码 #

class BookFeeder extends StatefulWidget {
  const BookFeeder({super.key});
  static const String id = 'BookFeeder';

  @override
  State<BookFeeder> createState() => _BookFeederState();
}

class _BookFeederState extends State<BookFeeder> {
  final PageController _pageController = PageController(initialPage: 0);
  bool _showAppBar = false;
  bool _showBottomBar = false;
  int _activePage = 0;

  _onPageViewChange(int page) {
    setState(() {
      _activePage = page;
    });
    print("Current Page: $_activePage");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _showAppBar
          ? AppBar(
              leadingWidth: 120,
              backgroundColor: const Color(0XFF293D63),
              leading: IconButton(
                onPressed: () => Navigator.pop(context),
                icon: SvgPicture.asset('images/button_goback_clean_svg.svg'),
              ),
              centerTitle: true,
              actions: [
                IconButton(
                  iconSize: 45,
                  onPressed: () => Navigator.pushNamed(context, MySettings.id),
                  icon: SvgPicture.asset('images/button_settings_clean_svg.svg'),
                ),
              ],
            )
          : null,
      body: GestureDetector(
        onTap: () => setState(() {
          _showAppBar = !_showAppBar;
          _showBottomBar = !_showBottomBar;
        }),
        child: ScrollConfiguration(
          behavior: ScrollConfiguration.of(context).copyWith(
            dragDevices: {PointerDeviceKind.touch, PointerDeviceKind.mouse},
          ),
          child: ScrollEdgeListener(
            edge: ScrollEdge.end,
            edgeOffset: 0,
            continuous: false,
            debounce: const Duration(milliseconds: 200),
            dispatch: true,
            listener: () {
              print('end reached');
              Navigator.pop(context);
            },
            child: StreamBuilder(
              stream: FirebaseFirestore.instance.collection('fishingmonkey').snapshots(),
              builder: (context, AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(child: CircularProgressIndicator());
                }

                final docs = snapshot.data!.docs;
                return Column(
                  children: [
                    Expanded(
                      child: PageView.builder(
                        onPageChanged: _onPageViewChange,
                        controller: _pageController,
                        itemCount: docs.length,
                        itemBuilder: (context, index) => BookContent(
                          snap: docs[index].data(),
                        ),
                      ),
                    ),
                    if (_showBottomBar)
                      BottomAppBar(
                        shape: const CircularNotchedRectangle(),
                        color: Colors.white,
                        elevation: 9,
                        child: SizedBox(
                          height: 70,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                            itemCount: docs.length,
                            itemBuilder: (context, index) => Padding(
                              padding: const EdgeInsets.fromLTRB(8, 16, 8, 16),
                              child: InkWell(
                                onTap: () {
                                  _pageController.jumpToPage(index);
                                  setState(() => _activePage = index);
                                },
                                child: CircleAvatar(
                                  radius: 10,
                                  backgroundColor: _activePage == index
                                      ? const Color(0XFF293D63)
                                      : Colors.blue[100],
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

额外优化点 #

• 给InkWell的onTap添加_pageController.jumpToPage(index)，实现点击指示器跳转到对应页面的功能
• 将bottomNavigationBar改为通过Column+Expanded嵌入到body中，避免独立bottomNavigationBar带来的额外重建干扰
• 移除重复的ScrollConfiguration嵌套，简化布局结构

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