feat(Core UI): common 常量
This commit is contained in:
131
apps/im_app/lib/core/ui/base/radius.dart
Normal file
131
apps/im_app/lib/core/ui/base/radius.dart
Normal 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);
|
||||||
|
}
|
||||||
104
apps/im_app/lib/core/ui/base/shadows.dart
Normal file
104
apps/im_app/lib/core/ui/base/shadows.dart
Normal 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),
|
||||||
|
)
|
||||||
|
];
|
||||||
|
}
|
||||||
72
apps/im_app/lib/core/ui/base/spacing.dart
Normal file
72
apps/im_app/lib/core/ui/base/spacing.dart
Normal 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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user