案例概述

本案例关注 600-1200px 的中等宽度区间（典型平板设备），展示如何通过调整内边距和网格列数，让平板布局既不显得拥挤又充分利用空间。

代码片段与说明

1. 判断平板区间

final width = MediaQuery.of(context).size.width;
final isTablet = width >= 600 && width < 1200;

说明：

• 与前几个案例保持一致的区间划分方式；
• 仅在这一范围内视为平板端，可以应用特定排版策略。

2. 平板优化的边距与网格

body: Padding(
  padding: EdgeInsets.symmetric(
    horizontal: isTablet ? 48 : 16,
    vertical: 24,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text('当前宽度：${width.toStringAsFixed(0)} px'),
      const SizedBox(height: 16),
      Expanded(
        child: GridView.count(
          crossAxisCount: isTablet ? 3 : 2,
          crossAxisSpacing: 16,
          mainAxisSpacing: 16,
          children: List.generate(6, (index) {
            return Container(
              decoration: BoxDecoration(
                color: Colors.purple.shade50,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(child: Text('平板卡片 ${index + 1}')),
            );
          }),
        ),
      ),
    ],
  ),
),

说明：

• 平板时水平内边距增大到 48，内容区更集中，阅读体验更好；
• 网格列数在平板上为 3 列，手机上为 2 列，充分利用更大的屏幕宽度；
• 适合展示平板上的卡片型内容，如应用图标、功能入口等。

应用场景

• 平板端主页：三列图标网格，每个图标代表一个功能模块；
• 设置/控制面板：将多个卡片控件均匀分布在网格中；
• 需要同时兼顾手机和平板的 UI 组件库示例页。

深入理解：平板端中屏优化的设计考量

1. 平板设备的独特地位

平板设备（600–1200px）处于手机和 PC 之间，有其独特的特点：

• 屏幕尺寸介于手机和 PC 之间：既不像手机那样受限，也不像 PC 那样宽敞；
• 使用场景多样：可能在沙发上、床上、办公桌上使用，用户姿态和使用习惯差异大；
• 用户期望：既希望有移动端的便利性，又希望有 PC 端的信息密度。

因此，平板端的设计需要在这些因素之间找到平衡。

2. 平板 vs 手机 vs PC 的布局差异

• 手机（<600px）：

  • 单列布局为主；
  • 信息密度较低，优先可读性；
  • 强调竖向滚动。

• 平板（600–1200px）：

  • 可以考虑两列或三列布局；
  • 在信息密度和可读性之间平衡；
  • 支持竖屏和横屏两种方向。

• PC（>=1200px）：

  • 多栏布局（两栏、三栏或更多）；
  • 信息密度较高，充分利用宽屏空间；
  • 通常固定为横屏。

3. 平板端的内边距策略

本案例中，平板端的水平内边距从 16px（手机）增加到 48px（平板）。这样做的好处：

• 内容集中：避免内容分散在屏幕两侧，用户视线更集中；
• 视觉平衡：两侧留白，整体布局更专业；
• 触摸友好：减少误触的风险，提升可用性。

4. 平板端的网格列数选择

在本案例中，平板端使用 3 列网格，而手机端使用 2 列。这个选择的理由：

• 充分利用宽度：600px 宽度足以容纳 3 列卡片（每列约 150–200px）；
• 避免过密集：4 列或更多会显得太拥挤，影响点击准确度；
• 保持可读性：3 列是一个很好的平衡点。

5. 平板端的交互设计考量

平板用户的交互方式有其特殊性：

• 主要输入方式是触摸：按钮和可点击元素应该足够大（至少 44×44px）；
• 可能使用手写笔：某些高端平板支持手写笔输入，设计时需要考虑精度；
• 可能连接键盘：某些用户会为平板连接蓝牙键盘，应支持键盘导航；
• 屏幕距离较远：平板通常离用户较远（如放在桌子上），字号应该比手机稍大。

6. 平板端优化在业务系统中的应用

• 电商应用：平板上展示 3 列商品网格，充分利用宽屏；
• 内容阅读：平板上展示两列文章列表或双页阅读模式；
• 数据输入：平板上展示多列表单字段，提升输入效率；
• 仪表盘：平板上展示 3 列卡片网格，展示关键指标；
• 教育应用：平板上展示课程列表和学习内容并排显示。

通过合理优化平板端布局，你可以为平板用户提供介于手机和 PC 之间的最佳体验，充分发挥平板设备的优势。