flutter TextTheme 手机端适配验证

是的完全适合手机端这是Material 3 标准字体规范专为移动设备优化。 手机端适配验证样式字号手机端适用性用途displayLarge57⚠️ 太大少用仅平板/折叠屏displayMedium45⚠️ 太大少用仅大标题页displaySmall36✅ 适合启动页、空状态headlineLarge32✅ 适合页面大标题headlineMedium28✅ 适合模块标题headlineSmall24✅ 适合卡片大标题titleLarge22✅ 适合列表项标题titleMedium16✅最常用卡片标题、小标题titleSmall14✅最常用辅助标签、副标题bodyLarge16✅正文标准段落文字bodyMedium14✅最常用默认正文、描述bodySmall12✅ 适合脚注、时间戳labelLarge14✅ 适合按钮文字labelMedium12✅ 适合小标签、徽章labelSmall11✅ 适合最小提示、角标 手机端最佳实践TextTheme_buildMobileTextTheme(ColorSchemecs){finalbaseTextStyle(color:cs.onSurface,inherit:true);returnTextTheme(// 手机端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,),// Body14-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字体方法库// 构建文字主题集成 ColorSchemeTextTheme_buildTextTheme(bool isDarkMode,ColorSchemecs){finalbaseStyleTextStyle(color:cs.onSurface,//inherit: true, // 跟随系统字体);returnTextTheme(// 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,// 优化弱化一点区分于 titleMediumcolor: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 规范场景最小字号对比度正文14sp4.5:1大文字 (18sp)18sp3:1禁用/辅助12sp3:1你的原始配置完全符合规范放心使用如需针对小屏手机5寸微调可将display/headline整体缩小 10-15%。