flutter TextTheme 手机端适配验证

是的，完全适合手机端！这是Material 3 标准字体规范，专为移动设备优化。

📱 手机端适配验证

样式	字号	手机端适用性	用途
`displayLarge`	57	⚠️ 太大，少用	仅平板/折叠屏
`displayMedium`	45	⚠️ 太大，少用	仅大标题页
`displaySmall`	36	✅ 适合	启动页、空状态
`headlineLarge`	32	✅ 适合	页面大标题
`headlineMedium`	28	✅ 适合	模块标题
`headlineSmall`	24	✅ 适合	卡片大标题
`titleLarge`	22	✅ 适合	列表项标题
`titleMedium`	16	✅ 最常用	卡片标题、小标题
`titleSmall`	14	✅ 最常用	辅助标签、副标题
`bodyLarge`	16	✅ 正文标准	段落文字
`bodyMedium`	14	✅ 最常用	默认正文、描述
`bodySmall`	12	✅ 适合	脚注、时间戳
`labelLarge`	14	✅ 适合	按钮文字
`labelMedium`	12	✅ 适合	小标签、徽章
`labelSmall`	11	✅ 适合	最小提示、角标

🎯 手机端最佳实践

dart 复制代码

TextTheme _buildMobileTextTheme(ColorScheme cs) {
  final base = TextStyle(color: cs.onSurface, inherit: true);

  return TextTheme(
    // 手机端：Display  rarely used, 缩小一点更实用
    displaySmall: base.copyWith(
      fontSize: 32,        // 从 36 缩小
      fontWeight: FontWeight.w300,
    ),
    
    // Headline：页面标题，手机端 20-28 最舒适
    headlineSmall: base.copyWith(
      fontSize: 20,        // 从 24 缩小
      fontWeight: FontWeight.w600,
    ),
    
    // Title：最常用，16-18 黄金区间
    titleMedium: base.copyWith(
      fontSize: 16,
      fontWeight: FontWeight.w600, // 手机端稍粗更清晰
    ),
    titleSmall: base.copyWith(
      fontSize: 14,
      color: cs.onSurfaceVariant,
    ),
    
    // Body：14-16 是手机阅读最佳字号
    bodyMedium: base.copyWith(
      fontSize: 14,
      height: 1.5,         // 手机端行高更重要
      letterSpacing: 0.25,
    ),
    bodySmall: base.copyWith(
      fontSize: 12,
      height: 1.4,
      color: cs.onSurfaceVariant,
    ),
    
    // Label：按钮不小于 14（可访问性）
    labelLarge: base.copyWith(
      fontSize: 14,        // 最小可点击文字
      fontWeight: FontWeight.w600,
      color: cs.primary,
    ),
  );
}

📏 手机端字号黄金法则

复制代码

推荐字号范围：12sp - 20sp

├── 12sp：最小辅助文字（时间戳、来源）
├── 14sp：正文标准（最常用）✅
├── 16sp：小标题、 emphasized 正文 ✅
├── 18sp：卡片标题、列表项标题
├── 20sp：页面标题（手机端最大推荐）
└── >20sp：仅特殊场景（平板、横屏）

TextTheme字体方法库

dart 复制代码

  // ========== 构建文字主题（集成 ColorScheme）==========
  TextTheme _buildTextTheme(bool isDarkMode, ColorScheme cs) {
    final baseStyle = TextStyle(
      color: cs.onSurface,
      //inherit: true, // 跟随系统字体
    );

    return TextTheme(
      // ========== Display（超大展示文字）==========
      // 用途：欢迎页数字、空状态图标文字、启动页标题
      // 特点：最大字号，轻微负字间距更紧凑
      displayLarge: baseStyle.copyWith(
        fontSize: 57,
        fontWeight: FontWeight.w300, // 细体更优雅
        letterSpacing: -0.25,
        color: cs.onSurface,
      ),
      displayMedium: baseStyle.copyWith(
        fontSize: 45,
        fontWeight: FontWeight.w300,
        letterSpacing: 0,
        color: cs.onSurface,
      ),
      displaySmall: baseStyle.copyWith(
        fontSize: 36,
        fontWeight: FontWeight.w400,
        letterSpacing: 0,
        color: cs.onSurface,
      ),

      // ========== Headline（页面标题）==========
      // 用途：页面顶部标题、模块大标题
      // 特点：醒目但比 Display 收敛
      headlineLarge: baseStyle.copyWith(
        fontSize: 32,
        fontWeight: FontWeight.w400,
        letterSpacing: 0,
        color: cs.onSurface,
      ),
      headlineMedium: baseStyle.copyWith(
        fontSize: 28,
        fontWeight: FontWeight.w400,
        letterSpacing: 0,
        color: cs.onSurface,
      ),
      headlineSmall: baseStyle.copyWith(
        fontSize: 24,
        fontWeight: FontWeight.w500, // 加粗区分层级
        letterSpacing: 0,
        color: cs.onSurface,
      ),

      // ========== Title（组件标题）==========
      // 用途：卡片标题、列表项标题、对话框标题
      // 优化：添加主色强调选项
      titleLarge: baseStyle.copyWith(
        fontSize: 22,
        fontWeight: FontWeight.w400,
        letterSpacing: 0,
        color: cs.onSurface,
      ),
      titleMedium: baseStyle.copyWith(
        fontSize: 16,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.15,
        color: cs.onSurface,
      ),
      titleSmall: baseStyle.copyWith(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.1,
        // 优化：弱化一点，区分于 titleMedium
        color: cs.onSurfaceVariant,
      ),

      // ========== Body（正文内容）==========
      // 用途：段落文字、说明文字、主要内容
      // 核心：阅读舒适度优先
      bodyLarge: baseStyle.copyWith(
        fontSize: 16,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.5, // 宽松字间距易读
        height: 1.5, // 行高增加可读性
        color: cs.onSurface,
      ),
      bodyMedium: baseStyle.copyWith(
        fontSize: 14,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.25,
        height: 1.4,
        color: cs.onSurface,
      ),
      bodySmall: baseStyle.copyWith(
        fontSize: 12,
        fontWeight: FontWeight.w400,
        letterSpacing: 0.4,
        height: 1.3,
        // 优化：明确使用弱化色
        color: cs.onSurfaceVariant,
      ),

      // ========== Label（标签、按钮、辅助文字）==========
      // 用途：按钮文字、标签、时间戳、提示信息
      // 优化：区分可点击 vs 纯辅助
      labelLarge: baseStyle.copyWith(
        fontSize: 14,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.1,
        // 优化：可点击标签用主色
        color: cs.onSurface,
      ),
      labelMedium: baseStyle.copyWith(
        fontSize: 12,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.5,
        // 优化：纯辅助标签用弱化色
        color: cs.onSurfaceVariant,
      ),
      labelSmall: baseStyle.copyWith(
        fontSize: 11,
        fontWeight: FontWeight.w500,
        letterSpacing: 0.5,
        // 优化：最弱层级，可再降透明度
        color: cs.onSurfaceVariant.withOpacity(0.8),
      ),
    );
  }

⚠️ 可访问性要求（Google 规范）

场景	最小字号	对比度
正文	14sp	4.5:1
大文字 (>18sp)	18sp	3:1
禁用/辅助	12sp	3:1

你的原始配置完全符合规范，放心使用！如需针对小屏手机（<5寸）微调，可将 display/headline 整体缩小 10-15%。