Flutter如何在不堆叠页面的前提下实现不同屏幕间的数据传递

问题原因 #

你当前使用的Navigator.push是向路由栈新增页面实例，和底部导航的同层级页面切换逻辑完全独立，所以会出现页面堆叠的问题。底部导航绑定的两个页面属于同一个父容器下的平级子页面，应该通过切换导航选中下标实现跳转，配合数据共享完成参数传递。

方案1：父组件状态托管+切换导航下标（推荐） #

适合绝大多数底部导航场景，后续扩展页面也更容易维护：

1. 找到包含BottomNavigationBar的父级有状态组件，定义共享订单数据变量和当前选中下标：

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

  @override
  State<MainScaffold> createState() => _MainScaffoldState();
}

class _MainScaffoldState extends State<MainScaffold> {
  int _currentIndex = 0; // 0对应主页，1对应菜单页
  // 定义共享的订单数据
  List? firstItemOrders;
  List? secondItemOrders;
  List? thirdItemOrders;
  List? fourthItemOrders;

  // 底部导航对应的页面列表
  late List<Widget> _pages;

  @override
  void initState() {
    super.initState();
    _pages = [
      // 主页接收父组件的订单数据
      Home(
        firstItemOrders: firstItemOrders,
        secondItemOrders: secondItemOrders,
        thirdItemOrders: thirdItemOrders,
        fourthItemOrders: fourthItemOrders,
      ),
      // 菜单页接收更新订单的回调函数
      MenuPage(
        onOrderUpdated: (order1, order2, order3, order4) {
          setState(() {
            // 更新父组件托管的订单数据
            firstItemOrders = order1;
            secondItemOrders = order2;
            thirdItemOrders = order3;
            fourthItemOrders = order4;
            // 切换到底部导航的主页
            _currentIndex = 0;
          });
        },
      )
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "主页"),
          BottomNavigationBarItem(icon: Icon(Icons.menu), label: "菜单"),
        ],
      ),
    );
  }
}

2. 菜单页定义回调参数接收父组件的方法，修改按钮点击逻辑：
   首先在MenuPage的构造函数中定义回调：

class MenuPage extends StatelessWidget {
  // 定义回调函数类型，参数为四个订单数据
  final Function(List? first, List? second, List? third, List? fourth) onOrderUpdated;
  const MenuPage({super.key, required this.onOrderUpdated});

  @override
  Widget build(BuildContext context) {
    // ... 你的其他页面逻辑
    // 原来的ElevatedButton修改为：
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 直接调用父组件传的回调，把本地的订单数据传回去
          onOrderUpdated(firstItemOrders, secondItemOrders, thirdItemOrders, fourthItemOrders);
        },
        child: const Text('Update order'),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.brown[400]),
      ),
    );
  }
}

方案2：pop带参数回传（轻量场景适用） #

如果你的项目很小，不想修改父组件结构，且菜单页是通过Navigator.push从主页跳转过来的，可以用这个方案：

1. 主页跳转菜单页时监听返回参数：

// 主页跳转到菜单页的逻辑
Navigator.of(context).push(MaterialPageRoute(builder: (context) => const MenuPage()))
.then((value) {
  // 接收菜单页返回的订单数据
  if (value != null) {
    setState(() {
      firstItemOrders = value['order1'];
      secondItemOrders = value['order2'];
      thirdItemOrders = value['order3'];
      fourthItemOrders = value['order4'];
    });
  }
});

2. 修改菜单页的按钮逻辑，把push替换为pop带参数返回：

Center(
  child: ElevatedButton(
    onPressed: () {
      Navigator.of(context).pop({
        "order1": firstItemOrders,
        "order2": secondItemOrders,
        "order3": thirdItemOrders,
        "order4": fourthItemOrders,
      });
    },
    child: const Text('Update order'),
    style: ElevatedButton.styleFrom(backgroundColor: Colors.brown[400]),
  ),
)

注意事项 #

• 优先使用方案1，符合底部导航的设计规范，不会出现路由栈混乱、返回键逻辑异常的问题
• 不要在底部导航的平级页面之间使用Navigator.push做跳转，所有平级页面切换都通过修改父组件的选中下标实现

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