Flutter开发餐饮应用时如何在平板横屏中同屏展示多个竖屏页面

核心是通过屏幕尺寸、横竖屏状态判断当前需要渲染的布局模式，同时将三个页面抽离为独立可复用组件，配合全局状态管理保证不同布局下数据一致性。 #

具体实现步骤 #

1. 布局触发条件判断 #

首先定义平板横屏的触发阈值，行业通用的判断逻辑是取设备最短边宽度≥600dp（基本覆盖所有平板设备），同时判断当前为横屏状态：

bool isTabletLandscape(BuildContext context) {
  final size = MediaQuery.of(context).size;
  final orientation = MediaQuery.of(context).orientation;
  return size.shortestSide >= 600 && orientation == Orientation.landscape;
}

2. 组件与状态抽离 #

把原来的三个独立页面：分类页、商品页、购物车页，全部抽离为不依赖路由上下文的独立Widget，所有共享状态（选中的分类、商品列表、购物车数据、选中商品规格等）抽离到上层，用Provider/Bloc/GetX任意你熟悉的状态管理方案做全局管理，避免布局切换时数据丢失或者不同步。

3. 动态渲染布局 #

根据判断条件动态切换两种布局模式：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: isTabletLandscape(context)
        ? // 平板横屏三栏布局
        Row(
            children: const [
              Expanded(flex: 2, child: CategoryPage()),
              Expanded(flex: 5, child: GoodsPage()),
              Expanded(flex: 3, child: CartPage()),
            ],
          )
        : // 手机端分页布局，沿用你原来的实现逻辑即可
        PageView(
            controller: _pageController,
            children: const [
              CategoryPage(),
              GoodsPage(),
              CartPage(),
            ],
          ),
    // 仅手机端展示底部导航栏切换页面
    bottomNavigationBar: isTabletLandscape(context)
        ? null
        : _buildMobileBottomNav(),
  );
}

效果示例 #

#

注意事项 #

• 平板竖屏可以单独适配双栏布局（分类+商品，购物车侧滑弹出），按需调整判断条件即可
• 布局切换时可以用AnimatedSwitcher包裹，增加过渡动画提升体验
• 不需要修改三个页面的内部业务逻辑，只需要调整外层容器和状态管理方案即可快速完成适配

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