Flutter底部导航栏页面内跳转及数据传递问题

核心思路 #

用主页面统一管理底部导航索引、页面列表和数据传递：

• 用PageView承载页面，设置禁止滑动避免误触
• 主页面给子页面传入切换回调和数据监听对象，子页面内部调用回调触发切换，同时通过共享对象传递数据
• 所有页面都是主页面的子组件，不会新建页面栈，符合需求

代码实现示例 #

1. 主页面（管理导航和数据）

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainPage());
  }
}

class MainPage extends StatefulWidget {
  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;
  final PageController _pageController = PageController();
  // 用ValueNotifier实现跨页面数据监听，比setState更高效
  final ValueNotifier<String> _transferData = ValueNotifier("");

  // 子页面触发切换的回调方法
  void _switchTab(int targetIndex, String data) {
    setState(() {
      _currentIndex = targetIndex;
      _transferData.value = data; // 更新要传递的数据
    });
    _pageController.jumpToPage(targetIndex);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        physics: const NeverScrollableScrollPhysics(), // 禁止滑动切换
        children: [
          // 给子页面传入切换回调和数据监听对象
          HomePage(onSwitchTab: _switchTab, transferData: _transferData),
          ProfilePage(transferData: _transferData),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          _switchTab(index, ""); // 底部导航切换时可传空数据
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "我的"),
        ],
      ),
    );
  }
}

2. 首页（子页面，触发切换并传参）

class HomePage extends StatelessWidget {
  final Function(int, String) onSwitchTab;
  final ValueNotifier<String> transferData;

  const HomePage({super.key, required this.onSwitchTab, required this.transferData});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text("首页"),
          ElevatedButton(
            onPressed: () {
              // 从首页内部切换到"我的"页面，并传递数据
              onSwitchTab(1, "从首页传来的用户ID: 1001");
            },
            child: const Text("切换到我的页面并传参"),
          ),
        ],
      ),
    );
  }
}

3. 我的页面（子页面，接收并展示数据）

class ProfilePage extends StatelessWidget {
  final ValueNotifier<String> transferData;

  const ProfilePage({super.key, required this.transferData});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ValueListenableBuilder<String>(
        valueListenable: transferData,
        builder: (context, data, child) {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("我的页面"),
              if (data.isNotEmpty) Text("收到的数据: $data"),
            ],
          );
        },
      ),
    );
  }
}

关键说明 #

• 禁止PageView滑动：通过physics: NeverScrollableScrollPhysics()实现，完全由底部导航或子页面触发切换
• 数据传递：用ValueNotifier+ValueListenableBuilder实现响应式数据更新，无需依赖第三方状态管理库，轻量高效
• 页面切换逻辑：所有切换都通过主页面的_switchTab方法完成，页面始终是主页面的子组件，不会新建页面栈

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