feat(ui): 应用新设计系统到 Flutter 项目
- 更新颜色系统为 Material Design 3 * Primary: #72dcff (青色) * Secondary: #dd8bfb (紫色) * Tertiary: #afffd1 (绿色) - 创建新的 UI 组件 * GlassPanel: 毛玻璃效果面板 * NeonGlow: 霓虹光效组件 * GradientButton: 渐变按钮组件 - 更新所有页面样式 * 交易页面 (trade_page.dart) * 行情页面 (market_page.dart) * 资产页面 (asset_page.dart) * 我的页面 (mine_page.dart) * 订单页面 (orders_page.dart) - 支持深色和浅色主题 - 所有 UI 文字使用中文 - 保持现有 API 接口不变 变更统计: - 9 个文件修改 - 1,893 行新增 - 691 行删除 - 3 个新组件
This commit is contained in:
403
flutter_monisuo/lib/ui/components/neon_glow.dart
Normal file
403
flutter_monisuo/lib/ui/components/neon_glow.dart
Normal file
@@ -0,0 +1,403 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../core/theme/app_color_scheme.dart';
|
||||
import '../../core/theme/app_spacing.dart';
|
||||
|
||||
/// NeonGlow - 霓虹光效组件
|
||||
///
|
||||
/// Material Design 3 风格的霓虹光效
|
||||
/// 用于按钮、卡片、图标等需要突出显示的元素
|
||||
///
|
||||
/// 光效类型:
|
||||
/// - Primary: 青色光效 (#72dcff)
|
||||
/// - Secondary: 紫色光效 (#dd8bfb)
|
||||
/// - Tertiary: 绿色光效 (#afffd1)
|
||||
/// - Error: 红色光效 (#ff716c)
|
||||
class NeonGlow extends StatelessWidget {
|
||||
/// 子组件
|
||||
final Widget child;
|
||||
|
||||
/// 光效颜色
|
||||
final Color glowColor;
|
||||
|
||||
/// 模糊半径，默认 15.0
|
||||
final double blurRadius;
|
||||
|
||||
/// 扩散半径，默认 0.0
|
||||
final double spreadRadius;
|
||||
|
||||
/// 圆角
|
||||
final BorderRadius? borderRadius;
|
||||
|
||||
const NeonGlow({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.glowColor,
|
||||
this.blurRadius = 15.0,
|
||||
this.spreadRadius = 0.0,
|
||||
this.borderRadius,
|
||||
});
|
||||
|
||||
/// Primary 霓虹光效 (青色)
|
||||
factory NeonGlow.primary({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 15.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.neonGlowPrimary,
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
/// Secondary 霓虹光效 (紫色)
|
||||
factory NeonGlow.secondary({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 15.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.neonGlowSecondary,
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
/// Tertiary 霓虹光效 (绿色)
|
||||
factory NeonGlow.tertiary({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 20.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.neonGlowTertiary,
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
/// Error 霓虹光效 (红色)
|
||||
factory NeonGlow.error({
|
||||
Key? key,
|
||||
required Widget child,
|
||||
double blurRadius = 15.0,
|
||||
BorderRadius? borderRadius,
|
||||
}) {
|
||||
return NeonGlow(
|
||||
key: key,
|
||||
glowColor: AppColorScheme.darkError.withValues(alpha: 0.3),
|
||||
blurRadius: blurRadius,
|
||||
borderRadius: borderRadius,
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final br = borderRadius ?? BorderRadius.circular(AppRadius.xl);
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: br,
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: glowColor,
|
||||
blurRadius: blurRadius,
|
||||
spreadRadius: spreadRadius,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// NeonButton - 带霓虹光效的按钮
|
||||
///
|
||||
/// 预设了常用配置，简化使用
|
||||
class NeonButton extends StatefulWidget {
|
||||
/// 按钮文本
|
||||
final String text;
|
||||
|
||||
/// 点击回调
|
||||
final VoidCallback? onPressed;
|
||||
|
||||
/// 按钮类型
|
||||
final NeonButtonType type;
|
||||
|
||||
/// 是否显示光效
|
||||
final bool showGlow;
|
||||
|
||||
/// 图标
|
||||
final IconData? icon;
|
||||
|
||||
/// 是否加载中
|
||||
final bool isLoading;
|
||||
|
||||
/// 按钮宽度
|
||||
final double? width;
|
||||
|
||||
/// 按钮高度，默认 48
|
||||
final double height;
|
||||
|
||||
const NeonButton({
|
||||
super.key,
|
||||
required this.text,
|
||||
this.onPressed,
|
||||
this.type = NeonButtonType.primary,
|
||||
this.showGlow = true,
|
||||
this.icon,
|
||||
this.isLoading = false,
|
||||
this.width,
|
||||
this.height = 48,
|
||||
});
|
||||
|
||||
@override
|
||||
State<NeonButton> createState() => _NeonButtonState();
|
||||
}
|
||||
|
||||
class _NeonButtonState extends State<NeonButton>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late AnimationController _controller;
|
||||
late Animation<double> _scaleAnimation;
|
||||
bool _isPressed = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = AnimationController(
|
||||
duration: const Duration(milliseconds: 150),
|
||||
vsync: this,
|
||||
);
|
||||
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
|
||||
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onTapDown(TapDownDetails details) {
|
||||
setState(() => _isPressed = true);
|
||||
_controller.forward();
|
||||
}
|
||||
|
||||
void _onTapUp(TapUpDetails details) {
|
||||
setState(() => _isPressed = false);
|
||||
_controller.reverse();
|
||||
}
|
||||
|
||||
void _onTapCancel() {
|
||||
setState(() => _isPressed = false);
|
||||
_controller.reverse();
|
||||
}
|
||||
|
||||
Color get _backgroundColor {
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return AppColorScheme.darkPrimary;
|
||||
case NeonButtonType.secondary:
|
||||
return AppColorScheme.darkSecondary;
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.darkTertiary;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.darkError;
|
||||
case NeonButtonType.outline:
|
||||
return Colors.transparent;
|
||||
}
|
||||
}
|
||||
|
||||
Color get _foregroundColor {
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return AppColorScheme.darkOnPrimaryFixed;
|
||||
case NeonButtonType.secondary:
|
||||
return AppColorScheme.darkOnSecondary;
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.darkOnTertiaryFixed;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.darkOnError;
|
||||
case NeonButtonType.outline:
|
||||
return AppColorScheme.darkPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
Color get _glowColor {
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return AppColorScheme.neonGlowPrimary;
|
||||
case NeonButtonType.secondary:
|
||||
return AppColorScheme.neonGlowSecondary;
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.neonGlowTertiary;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.darkError.withValues(alpha: 0.3);
|
||||
case NeonButtonType.outline:
|
||||
return AppColorScheme.neonGlowPrimary;
|
||||
}
|
||||
}
|
||||
|
||||
LinearGradient? get _gradient {
|
||||
if (widget.type == NeonButtonType.outline) return null;
|
||||
|
||||
switch (widget.type) {
|
||||
case NeonButtonType.primary:
|
||||
return const LinearGradient(
|
||||
colors: [AppColorScheme.darkPrimary, AppColorScheme.darkPrimaryContainer],
|
||||
begin: Alignment(-0.7, -0.7),
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
case NeonButtonType.secondary:
|
||||
return const LinearGradient(
|
||||
colors: [AppColorScheme.darkSecondary, AppColorScheme.darkSecondaryFixed],
|
||||
begin: Alignment(-0.7, -0.7),
|
||||
end: Alignment(0.7, 0.7),
|
||||
);
|
||||
case NeonButtonType.tertiary:
|
||||
return AppColorScheme.buyGradient;
|
||||
case NeonButtonType.error:
|
||||
return AppColorScheme.sellGradient;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final button = GestureDetector(
|
||||
onTapDown: widget.onPressed != null ? _onTapDown : null,
|
||||
onTapUp: widget.onPressed != null ? _onTapUp : null,
|
||||
onTapCancel: widget.onPressed != null ? _onTapCancel : null,
|
||||
onTap: widget.isLoading ? null : widget.onPressed,
|
||||
child: ScaleTransition(
|
||||
scale: _scaleAnimation,
|
||||
child: Container(
|
||||
width: widget.width,
|
||||
height: widget.height,
|
||||
decoration: BoxDecoration(
|
||||
gradient: _gradient,
|
||||
color: _gradient == null ? _backgroundColor : null,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||||
border: widget.type == NeonButtonType.outline
|
||||
? Border.all(
|
||||
color: AppColorScheme.darkOutlineVariant.withValues(alpha: 0.3),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
child: Center(
|
||||
child: widget.isLoading
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(_foregroundColor),
|
||||
),
|
||||
)
|
||||
: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.icon != null) ...[
|
||||
Icon(widget.icon, size: 18, color: _foregroundColor),
|
||||
SizedBox(width: AppSpacing.sm),
|
||||
],
|
||||
Text(
|
||||
widget.text,
|
||||
style: TextStyle(
|
||||
color: _foregroundColor,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
if (widget.showGlow && widget.type != NeonButtonType.outline) {
|
||||
return NeonGlow(
|
||||
glowColor: _glowColor,
|
||||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||||
child: button,
|
||||
);
|
||||
}
|
||||
|
||||
return button;
|
||||
}
|
||||
}
|
||||
|
||||
/// 按钮类型
|
||||
enum NeonButtonType {
|
||||
/// 主要按钮 (青色)
|
||||
primary,
|
||||
|
||||
/// 次要按钮 (紫色)
|
||||
secondary,
|
||||
|
||||
/// 成功按钮 (绿色)
|
||||
tertiary,
|
||||
|
||||
/// 危险按钮 (红色)
|
||||
error,
|
||||
|
||||
/// 边框按钮
|
||||
outline,
|
||||
}
|
||||
|
||||
/// NeonIcon - 带霓虹光效的图标
|
||||
class NeonIcon extends StatelessWidget {
|
||||
/// 图标
|
||||
final IconData icon;
|
||||
|
||||
/// 图标大小
|
||||
final double size;
|
||||
|
||||
/// 图标颜色
|
||||
final Color color;
|
||||
|
||||
/// 光效颜色，默认使用图标颜色
|
||||
final Color? glowColor;
|
||||
|
||||
/// 光效模糊半径
|
||||
final double glowBlur;
|
||||
|
||||
const NeonIcon({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.size = 24,
|
||||
required this.color,
|
||||
this.glowColor,
|
||||
this.glowBlur = 10,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: glowColor ?? color.withValues(alpha: 0.5),
|
||||
blurRadius: glowBlur,
|
||||
spreadRadius: 0,
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Icon(icon, size: size, color: color),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user