feat(Core UI): common 常量

This commit is contained in:
DK
2026-03-08 15:30:37 +08:00
parent 9f4db63d8a
commit f9d4760e5e
3 changed files with 307 additions and 0 deletions

View File

@@ -0,0 +1,131 @@
import 'package:flutter/widgets.dart';
/// 圆角设计 Token
///
/// 统一管理项目中的圆角规范,避免在业务代码中直接写
/// `Radius.circular()` 或 `BorderRadius.circular()`
///
/// 使用方式:
///
/// ```dart
/// Container(
/// decoration: BoxDecoration(
/// borderRadius: AppRadius.card,
/// ),
/// )
/// ```
///
/// 设计规范来源:
/// 通常来自 UI 设计系统,例如
/// 4 / 8 / 12 / 16 / 20
class AppRadius {
/// 私有构造函数,防止被实例化
AppRadius._();
// ================================
// 基础 Radius Token
// ================================
// 用于组合 BorderRadius
/// 4px 圆角
static const Radius r4 = Radius.circular(4);
/// 6px 圆角
static const Radius r6 = Radius.circular(6);
/// 8px 圆角(常用于按钮)
static const Radius r8 = Radius.circular(8);
/// 10px 圆角
static const Radius r10 = Radius.circular(10);
/// 12px 圆角(常用于卡片)
static const Radius r12 = Radius.circular(12);
/// 14px 圆角
static const Radius r14 = Radius.circular(14);
/// 16px 圆角(常用于弹窗)
static const Radius r16 = Radius.circular(16);
/// 18px 圆角
static const Radius r18 = Radius.circular(18);
/// 20px 圆角
static const Radius r20 = Radius.circular(20);
// ================================
// 组件级设计 Token
// ================================
// 推荐优先使用这些,而不是直接使用 brXX
/// 卡片圆角
///
/// 示例Card / 商品卡片 / 信息卡片
static const BorderRadius card = BorderRadius.all(r12);
/// 按钮圆角
///
/// 示例PrimaryButton / SecondaryButton
static const BorderRadius button = BorderRadius.all(r8);
/// 弹窗圆角
///
/// 示例Dialog / Modal
static const BorderRadius dialog = BorderRadius.all(r16);
// ================================
// 通用 BorderRadius
// ================================
// 当组件 Token 不满足需求时使用
static const BorderRadius br4 = BorderRadius.all(r4);
static const BorderRadius br6 = BorderRadius.all(r6);
static const BorderRadius br8 = BorderRadius.all(r8);
static const BorderRadius br10 = BorderRadius.all(r10);
static const BorderRadius br12 = BorderRadius.all(r12);
static const BorderRadius br14 = BorderRadius.all(r14);
static const BorderRadius br16 = BorderRadius.all(r16);
static const BorderRadius br18 = BorderRadius.all(r18);
static const BorderRadius br20 = BorderRadius.all(r20);
// ================================
// 辅助方法
// ================================
// 用于生成顶部或底部圆角
/// 生成顶部圆角
///
/// 常用于:
/// - BottomSheet
/// - 底部弹窗
/// - 半屏弹层
///
/// 示例:
/// ```dart
/// borderRadius: AppRadius.top(AppRadius.r16)
/// ```
static BorderRadius top(Radius r) =>
BorderRadius.vertical(top: r);
/// 生成底部圆角
///
/// 常用于:
/// - Header
/// - 顶部卡片
///
/// 示例:
/// ```dart
/// borderRadius: AppRadius.bottom(AppRadius.r16)
/// ```
static BorderRadius bottom(Radius r) =>
BorderRadius.vertical(bottom: r);
}

View File

@@ -0,0 +1,104 @@
import 'package:flutter/material.dart';
/// 阴影设计 Token
///
/// 统一管理项目中的阴影规范,避免在业务代码中直接写 BoxShadow。
///
/// 使用示例:
///
/// ```dart
/// Container(
/// decoration: BoxDecoration(
/// color: Colors.white,
/// boxShadow: AppShadows.bs8,
/// ),
/// )
/// ```
///
/// 阴影一般用于:
/// - Card 卡片
/// - Dialog 弹窗
/// - Floating Button
/// - 悬浮面板
///
/// 设计通常遵循 UI 设计系统的 elevation 规则,例如:
/// 4 / 8 / 12 / 16
class AppShadows {
/// 私有构造函数,防止实例化
AppShadows._();
// ================================
// 轻量阴影
// ================================
// 适用于轻微层级,例如小卡片
/// 轻阴影4
///
/// 常用于:
/// - 小卡片
/// - List item
static const List<BoxShadow> bs4 = [
BoxShadow(
/// 阴影颜色(透明黑)
color: Color(0x14000000),
/// 模糊半径
blurRadius: 4,
/// 阴影偏移
offset: Offset(0, 2),
)
];
// ================================
// 中等阴影
// ================================
/// 中等阴影8
///
/// 常用于:
/// - Card
/// - 商品卡片
static const List<BoxShadow> bs8 = [
BoxShadow(
color: Color(0x1F000000),
blurRadius: 8,
offset: Offset(0, 4),
)
];
// ================================
// 强阴影
// ================================
/// 强阴影12
///
/// 常用于:
/// - 悬浮卡片
/// - Dropdown
static const List<BoxShadow> bs12 = [
BoxShadow(
color: Color(0x26000000),
blurRadius: 12,
offset: Offset(0, 8),
)
];
// ================================
// 高层级阴影
// ================================
/// 高层级阴影16
///
/// 常用于:
/// - Dialog
/// - Modal
/// - Floating Panel
static const List<BoxShadow> bs16 = [
BoxShadow(
color: Color(0x26000000),
blurRadius: 16,
offset: Offset(0, 8),
)
];
}

View File

@@ -0,0 +1,72 @@
/// 间距设计 Token
///
/// 统一管理项目中的间距规范,避免在业务代码中直接写 magic number例如
///
/// ❌ 不推荐
/// ```dart
/// Padding(padding: EdgeInsets.all(16))
/// ```
///
/// ✅ 推荐
/// ```dart
/// Padding(padding: EdgeInsets.all(AppSpacing.s16))
/// ```
///
/// 常用于:
/// - Padding
/// - Margin
/// - SizedBox
/// - Sliver 间距
///
/// 设计规范通常来源于 UI 设计系统,例如:
/// 4 / 8 / 12 / 16 / 24 / 32
class AppSpacing {
/// 私有构造函数,防止实例化
AppSpacing._();
// ================================
// 基础间距 Token
// ================================
/// 4px 间距(最小间距)
///
/// 常用于:
/// - icon 与文字之间
/// - 紧凑布局
static const double s4 = 4;
/// 8px 间距(小间距)
///
/// 常用于:
/// - 列表 item 内间距
/// - 小组件之间
static const double s8 = 8;
/// 12px 间距(中小间距)
///
/// 常用于:
/// - 表单组件
/// - 信息块之间
static const double s12 = 12;
/// 16px 间距(标准间距)
///
/// 常用于:
/// - 页面 Padding
/// - Card 内边距
static const double s16 = 16;
/// 24px 间距(大间距)
///
/// 常用于:
/// - 模块之间
/// - Section 分隔
static const double s24 = 24;
/// 32px 间距(超大间距)
///
/// 常用于:
/// - 页面大区块
/// - 顶部/底部留白
static const double s32 = 32;
}