案例概述

本案例聚焦桌面端宽屏场景，演示如何在宽度>=1200px 时使用多列布局最大化利用空间，同时限制整体内容宽度以保证可读性。

页面结构：

• 顶部 AppBar；
• 中间通过 Center + ConstrainedBox(maxWidth: 1200) 居中一个 1200px 的内容区；
• 内容区内使用 Row + Expanded 构建“侧边导航 + 主内容”两栏结构。

代码片段与说明

1. 限制内容最大宽度

body: Center(
  child: ConstrainedBox(
    constraints: const BoxConstraints(maxWidth: 1200),
    child: Row(
      children: [
        // 左侧导航
        // 右侧主内容
      ],
    ),
  ),
),

说明：

• 无论屏幕多宽，内容始终控制在 1200 像素以内；
• 适合类似 Web 页面、管理后台的桌面布局；
• 外层 Center 负责居中，ConstrainedBox 控制最大宽度。

2. 左右两栏布局

Row(
  children: [
    Expanded(
      flex: 2,
      child: Container(
        color: Colors.grey.shade100,
        padding: const EdgeInsets.all(16),
        child: const Text('侧边导航 / 列表区'),
      ),
    ),
    Expanded(
      flex: 5,
      child: Container(
        color: Colors.white,
        padding: const EdgeInsets.all(16),
        child: const Text('主内容区（宽屏时更宽）'),
      ),
    ),
  ],
),

说明：

• 左侧窄栏可承载菜单、列表、过滤条件等；
• 右侧宽栏显示主要内容，如表格、详情、图表；
• 通过 flex 控制左右列宽度比例（2:5）。

应用场景

• 桌面端管理后台：左侧是导航树，右侧是当前模块内容；
• 邮件客户端：左侧为文件夹/邮箱列表，右侧为邮件内容；
• 数据分析平台：左侧为筛选条件，右侧为图表和报表。

深入理解：PC 端宽屏布局的设计原则

1. 为什么需要特殊的 PC 端布局？

PC 屏幕的宽度通常是手机的 2–3 倍，如果直接把移动端布局放大到 PC，会出现：

• 每行文字过长，阅读困难；
• 内容分散在屏幕四周，用户需要频繁移动视线；
• 空间利用效率低下。

因此，PC 端需要一套完全不同的布局策略，充分利用宽屏空间，同时保持良好的可读性。

2. 多栏布局的优势

在 PC 宽屏上，多栏布局（如左侧栏 + 右侧栏）有几个明显优势：

• 信息并行展示：用户可以同时看到列表和详情，无需频繁切换；
• 操作效率高：减少页面跳转，用户可以快速完成任务；
• 空间利用充分：充分利用宽屏空间，避免浪费。

这正是为什么几乎所有的 PC 端应用都采用多栏布局。

3. 内容宽度限制的必要性

即使屏幕很宽，也不应该让内容占满整个屏幕宽度。原因包括：

• 可读性：每行文字过长会降低阅读速度和理解能力；
• 视觉平衡：内容居中、两侧留白，视觉效果更专业；
• 响应式考虑：限制宽度后，应用在不同分辨率的 PC 上都能保持一致的外观。

常见的做法是限制主内容宽度在 1000–1200px 之间。

4. 左右栏的宽度比例

在本案例中，我们使用 flex: 2 和 flex: 5 的比例，即左侧占 2/7、右侧占 5/7。这个比例的选择取决于：

• 内容类型：如果左侧是导航树（通常较窄），可以用 2:5 或 1:3；如果左侧是列表（需要展示更多信息），可以用 1:1 或 2:3；
• 业务需求：某些应用可能需要更宽的左侧（如内容管理系统），某些则需要更宽的右侧（如数据分析）。

5. PC 端多栏布局的常见模式

• 两栏：导航 + 内容（本案例）；
• 三栏：导航 + 列表 + 详情（Gmail、Outlook 等邮件客户端）；
• 四栏：导航 + 列表 + 详情 + 操作面板（某些复杂的企业应用）。

栏数越多，每栏的宽度就越窄，需要在信息密度和可读性之间找到平衡。

6. PC 端宽屏布局在业务系统中的应用

• 管理后台：左侧菜单树，右侧数据表格或表单；
• 内容管理系统：左侧文件树，右侧编辑器；
• 邮件客户端：左侧文件夹，中间邮件列表，右侧邮件内容；
• 数据分析平台：左侧筛选条件，右侧图表和数据表；
• IDE / 代码编辑器：左侧文件树，中间代码编辑器，右侧预览或属性面板。

通过掌握 PC 端宽屏布局的设计原则，你可以构建出专业、高效的桌面应用。