refactor: 优化字号主题体系，参考成熟交易平台标准
- 重构主题字号体系 (h1-h4, body, amount等) - 修复16个页面文件中的硬编码字号 - 新字号层级参考币安/OKX标准 - Display: 22/20/18px (总资产、价格) - Headline: 15/14/13px (标题、副标题) - Body: 13/12/11px (正文、辅助文字) - Label: 11/10/9px (标签) - Number: 22/16/13px (数字)
This commit is contained in:
@@ -14,7 +14,7 @@ class AppTextStyles {
|
||||
|
||||
/// H1 - 页面大标题
|
||||
static const TextStyle h1 = TextStyle(
|
||||
fontSize: 28,
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.3,
|
||||
@@ -22,7 +22,7 @@ class AppTextStyles {
|
||||
|
||||
/// H2 - 区块标题
|
||||
static const TextStyle h2 = TextStyle(
|
||||
fontSize: 24,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.3,
|
||||
@@ -30,7 +30,7 @@ class AppTextStyles {
|
||||
|
||||
/// H3 - 卡片标题
|
||||
static const TextStyle h3 = TextStyle(
|
||||
fontSize: 20,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.4,
|
||||
@@ -38,7 +38,7 @@ class AppTextStyles {
|
||||
|
||||
/// H4 - 小标题
|
||||
static const TextStyle h4 = TextStyle(
|
||||
fontSize: 18,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.4,
|
||||
@@ -50,7 +50,7 @@ class AppTextStyles {
|
||||
|
||||
/// Body1 - 主要正文
|
||||
static const TextStyle body1 = TextStyle(
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.5,
|
||||
@@ -58,7 +58,7 @@ class AppTextStyles {
|
||||
|
||||
/// Body2 - 次要正文
|
||||
static const TextStyle body2 = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.5,
|
||||
@@ -86,7 +86,7 @@ class AppTextStyles {
|
||||
|
||||
/// Hint - 提示文字
|
||||
static const TextStyle hint = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.normal,
|
||||
color: AppColors.textHint,
|
||||
height: 1.4,
|
||||
@@ -98,7 +98,7 @@ class AppTextStyles {
|
||||
|
||||
/// 金额/价格 - 大号数字
|
||||
static const TextStyle amount = TextStyle(
|
||||
fontSize: 32,
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.2,
|
||||
@@ -107,7 +107,7 @@ class AppTextStyles {
|
||||
|
||||
/// 价格 - 标准数字
|
||||
static const TextStyle price = TextStyle(
|
||||
fontSize: 18,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.3,
|
||||
@@ -116,7 +116,7 @@ class AppTextStyles {
|
||||
|
||||
/// 价格变化 - 涨跌幅
|
||||
static const TextStyle priceChange = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
height: 1.3,
|
||||
fontFeatures: [FontFeature.tabularFigures()],
|
||||
@@ -124,7 +124,7 @@ class AppTextStyles {
|
||||
|
||||
/// 按钮文字
|
||||
static const TextStyle button = TextStyle(
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColors.textPrimary,
|
||||
height: 1.2,
|
||||
@@ -132,7 +132,7 @@ class AppTextStyles {
|
||||
|
||||
/// 链接文字
|
||||
static const TextStyle link = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: AppColors.textLink,
|
||||
decoration: TextDecoration.underline,
|
||||
|
||||
@@ -26,9 +26,8 @@ class AppTheme {
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
// 【优化】使用 Inter 字体替代 Space Grotesk，提升专业金融感
|
||||
titleTextStyle: GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColorScheme.darkOnSurface,
|
||||
),
|
||||
@@ -81,9 +80,8 @@ class AppTheme {
|
||||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||||
),
|
||||
elevation: 0,
|
||||
// 【优化】使用 Inter 字体替代 Manrope，提升专业金融感
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
@@ -131,9 +129,8 @@ class AppTheme {
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: true,
|
||||
// 【优化】使用 Inter 字体替代 Space Grotesk，提升专业金融感
|
||||
titleTextStyle: GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: AppColorScheme.lightOnSurface,
|
||||
),
|
||||
@@ -188,9 +185,8 @@ class AppTheme {
|
||||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||||
),
|
||||
elevation: 0,
|
||||
// 【优化】使用 Inter 字体替代 Manrope，提升专业金融感
|
||||
textStyle: GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
@@ -227,30 +223,30 @@ class AppTextStyles {
|
||||
AppTextStyles._();
|
||||
|
||||
// ============================================
|
||||
// Display - 大标题
|
||||
// Display - 核心数字 (价格/余额)
|
||||
// 参考 Binance/OKX 紧凑专业风格
|
||||
// ============================================
|
||||
|
||||
/// D1 - 大标题 (48px) - Hero moments
|
||||
/// D1 - 总资产余额 (22px)
|
||||
static TextStyle displayLarge(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 48,
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.1,
|
||||
letterSpacing: -0.02,
|
||||
);
|
||||
|
||||
/// D2 - 中标题 (36px)
|
||||
static TextStyle displayMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 36,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.2,
|
||||
height: 1.15,
|
||||
letterSpacing: -0.01,
|
||||
);
|
||||
|
||||
/// D3 - 小标题 (28px)
|
||||
/// D2 - 主价格 (20px)
|
||||
static TextStyle displayMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.2,
|
||||
);
|
||||
|
||||
/// D3 - 次要价格 (18px)
|
||||
static TextStyle displaySmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 28,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.25,
|
||||
@@ -260,22 +256,25 @@ class AppTextStyles {
|
||||
// Headline - 标题
|
||||
// ============================================
|
||||
|
||||
/// 区域标题 (15px)
|
||||
static TextStyle headlineLarge(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 24,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.3,
|
||||
);
|
||||
|
||||
/// 卡片标题 (14px)
|
||||
static TextStyle headlineMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 20,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.35,
|
||||
);
|
||||
|
||||
/// 副标题 (13px)
|
||||
static TextStyle headlineSmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.4,
|
||||
@@ -285,74 +284,83 @@ class AppTextStyles {
|
||||
// Body - 正文
|
||||
// ============================================
|
||||
|
||||
/// 主要正文 (13px)
|
||||
static TextStyle bodyLarge(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.5,
|
||||
height: 1.45,
|
||||
);
|
||||
|
||||
/// 次要正文 (12px)
|
||||
static TextStyle bodyMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.5,
|
||||
);
|
||||
|
||||
static TextStyle bodySmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.45,
|
||||
);
|
||||
|
||||
/// 辅助文字 (11px)
|
||||
static TextStyle bodySmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w400,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
height: 1.4,
|
||||
);
|
||||
|
||||
// ============================================
|
||||
// Label - 标签
|
||||
// ============================================
|
||||
|
||||
/// 常规标签 (11px)
|
||||
static TextStyle labelLarge(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.4,
|
||||
);
|
||||
|
||||
static TextStyle labelMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
height: 1.4,
|
||||
);
|
||||
|
||||
static TextStyle labelSmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 11,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.35,
|
||||
);
|
||||
|
||||
/// 小标签 (10px)
|
||||
static TextStyle labelMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 10,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
height: 1.4,
|
||||
height: 1.35,
|
||||
);
|
||||
|
||||
/// 极小标签 (9px)
|
||||
static TextStyle labelSmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 9,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
height: 1.35,
|
||||
);
|
||||
|
||||
// ============================================
|
||||
// 数字/金额 - Inter (等宽特性)
|
||||
// ============================================
|
||||
|
||||
/// 大号数字 (22px) - 主价格、总资产
|
||||
static TextStyle numberLarge(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 24,
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.2,
|
||||
height: 1.15,
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
);
|
||||
|
||||
/// 中号数字 (16px) - 次要价格、数量
|
||||
static TextStyle numberMedium(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 18,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.25,
|
||||
fontFeatures: const [FontFeature.tabularFigures()],
|
||||
);
|
||||
|
||||
/// 小号数字 (13px) - 涨跌幅、小量
|
||||
static TextStyle numberSmall(BuildContext context) => GoogleFonts.inter(
|
||||
fontSize: 14,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Theme.of(context).colorScheme.onSurface,
|
||||
height: 1.3,
|
||||
@@ -365,72 +373,72 @@ class AppTextStyles {
|
||||
|
||||
@Deprecated('Use displaySmall instead')
|
||||
static const TextStyle heading1 = TextStyle(
|
||||
fontSize: 28,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use headlineLarge instead')
|
||||
static const TextStyle heading2 = TextStyle(
|
||||
fontSize: 24,
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use headlineMedium instead')
|
||||
static const TextStyle heading3 = TextStyle(
|
||||
fontSize: 18,
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use headlineSmall instead')
|
||||
static const TextStyle heading4 = TextStyle(
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use bodyLarge instead')
|
||||
static const TextStyle body1 = TextStyle(
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use bodyMedium instead')
|
||||
static const TextStyle body2 = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use labelSmall instead')
|
||||
static const TextStyle caption = TextStyle(
|
||||
fontSize: 12,
|
||||
fontSize: 11,
|
||||
color: Color(0xFFA1A1AA),
|
||||
);
|
||||
|
||||
@Deprecated('Use labelSmall instead')
|
||||
static const TextStyle hint = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 12,
|
||||
color: Color(0xFF71717A),
|
||||
);
|
||||
|
||||
@Deprecated('Use numberMedium instead')
|
||||
static const TextStyle price = TextStyle(
|
||||
fontSize: 20,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
@Deprecated('Use numberSmall with color instead')
|
||||
static const TextStyle change = TextStyle(
|
||||
fontSize: 14,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
);
|
||||
|
||||
@Deprecated('Use numberSmall instead')
|
||||
static const TextStyle number = TextStyle(
|
||||
fontSize: 16,
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: Color(0xFFFFFFFF),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user