sion/monisuo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): 优化组件样式并添加现代弹窗模板

Browse Source 
- 更新 trade_button.dart 使用新颜色系统
- 更新 coin_card.dart 使用新颜色系统
- 更新 asset_card.dart 使用新颜色系统
- 创建 modern_dialog.dart 现代弹窗模板
- 创建 modern_bottom_sheet.dart 现代底部抽屉模板

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
sion
2026-03-23 14:18:56 +08:00
parent c4cf23a4a1
commit e58d2e4ca0
5 changed files with 530 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
flutter_monisuo/lib/ui/components/asset_card.dart
View File

@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/theme/app_colors.dart';
import '../../core/theme/app_color_scheme.dart';
/// 资产卡片组件 - 用于显示资产总览
class AssetCard extends StatelessWidget {
@@ -13,9 +13,9 @@ class AssetCard extends StatelessWidget {
final Gradient? gradient;
final VoidCallback? onTap;
// 默认渐变色 - 使用品牌蓝
// 默认渐变色 - 使用品牌青绿色
static const defaultGradient = LinearGradient(
colors: [Color(0xFF2563EB), Color(0xFF1D4ED8)],
colors: [AppColorScheme.primaryDark, Color(0xFF00B894)],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
);
@@ -54,7 +54,7 @@ class AssetCard extends StatelessWidget {
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 10,
offset: const Offset(0, 4),
),
@@ -72,7 +72,7 @@ class AssetCard extends StatelessWidget {
),
const Spacer(),
if (onTap != null)
Icon(
const Icon(
LucideIcons.chevronRight,
color: Colors.white70,
size: 18,
@@ -161,9 +161,6 @@ class AssetCardCompact extends StatelessWidget {
final bool? isUp;
final VoidCallback? onTap;
static const upColor = Color(0xFF00C853);
static const downColor = Color(0xFFFF5252);
const AssetCardCompact({
super.key,
required this.title,
@@ -176,6 +173,7 @@ class AssetCardCompact extends StatelessWidget {
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final isValueUp = isUp ?? true;
return ShadCard(
padding: const EdgeInsets.all(16),
@@ -205,13 +203,13 @@ class AssetCardCompact extends StatelessWidget {
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: (isUp ?? true) ? upColor.withOpacity(0.2) : downColor.withOpacity(0.2),
color: getChangeBackgroundColor(isValueUp),
borderRadius: BorderRadius.circular(6),
),
child: Text(
change!,
style: TextStyle(
color: (isUp ?? true) ? upColor : downColor,
color: getChangeColor(isValueUp),
fontWeight: FontWeight.w600,
),
),

8
flutter_monisuo/lib/ui/components/coin_card.dart
View File

@@ -1,6 +1,6 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/constants/app_colors.dart';
import '../../core/theme/app_color_scheme.dart';
/// 币种卡片组件 - 用于显示币种信息
class CoinCard extends StatelessWidget {
@@ -38,7 +38,7 @@ class CoinCard extends StatelessWidget {
width: 44,
height: 44,
decoration: BoxDecoration(
color: theme.colorScheme.primary.withOpacity(0.1),
color: theme.colorScheme.primary.withValues(alpha: 0.1),
shape: BoxShape.circle,
),
child: Center(
@@ -75,13 +75,13 @@ class CoinCard extends StatelessWidget {
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: AppColors.getChangeBackgroundColor(isUp),
color: getChangeBackgroundColor(isUp),
borderRadius: BorderRadius.circular(6),
),
child: Text(
change,
style: TextStyle(
color: AppColors.getChangeColor(isUp),
color: getChangeColor(isUp),
fontWeight: FontWeight.w600,
),
),

7
flutter_monisuo/lib/ui/components/trade_button.dart
View File

@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/theme/app_color_scheme.dart';
/// 交易按钮组件 - 买入/卖出按钮
class TradeButton extends StatelessWidget {
@@ -9,10 +10,6 @@ class TradeButton extends StatelessWidget {
final bool isLoading;
final bool fullWidth;
// 颜色常量
static const buyColor = Color(0xFF00C853);
static const sellColor = Color(0xFFFF5252);
const TradeButton({
super.key,
this.isBuy = true,
@@ -42,7 +39,7 @@ class TradeButton extends StatelessWidget {
@override
Widget build(BuildContext context) {
final color = isBuy ? buyColor : sellColor;
final color = isBuy ? AppColorScheme.up : AppColorScheme.down;
final text = isBuy ? '买入${coinCode != null ? ' $coinCode' : ''}' : '卖出${coinCode != null ? ' $coinCode' : ''}';
final icon = isBuy ? LucideIcons.arrowDownToLine : LucideIcons.arrowUpFromLine;

309
flutter_monisuo/lib/ui/shared/modern_bottom_sheet.dart Normal file
View File

@@ -0,0 +1,309 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/theme/app_spacing.dart';
/// 现代底部抽屉模板 - 基于 modernization-v2.md 规范
///
/// 使用方法：
/// ```dart
/// ModernBottomSheet.show(
/// context: context,
/// title: '选择币种',
/// child: YourContentWidget(),
/// );
/// ```
class ModernBottomSheet extends StatelessWidget {
final String? title;
final Widget? titleWidget;
final Widget child;
final double? height;
final bool showDragHandle;
final bool showCloseButton;
final VoidCallback? onClose;
const ModernBottomSheet({
super.key,
this.title,
this.titleWidget,
required this.child,
this.height,
this.showDragHandle = true,
this.showCloseButton = false,
this.onClose,
});
/// 显示底部抽屉
static Future<T?> show<T>({
required BuildContext context,
String? title,
Widget? titleWidget,
required Widget child,
double? height,
bool showDragHandle = true,
bool showCloseButton = false,
bool isScrollControlled = true,
bool isDismissible = true,
bool enableDrag = true,
}) {
return showModalBottomSheet<T>(
context: context,
isScrollControlled: isScrollControlled,
isDismissible: isDismissible,
enableDrag: enableDrag,
backgroundColor: Colors.transparent,
builder: (context) => ModernBottomSheet(
title: title,
titleWidget: titleWidget,
child: child,
height: height,
showDragHandle: showDragHandle,
showCloseButton: showCloseButton,
),
);
}
/// 显示操作列表
static Future<T?> showActions<T>({
required BuildContext context,
String? title,
required List<ModernSheetAction> actions,
}) {
return show(
context: context,
title: title,
child: _ActionList(actions: actions),
);
}
/// 显示确认操作
static Future<bool> confirmAction({
required BuildContext context,
required String title,
String? description,
String confirmText = '确认',
String cancelText = '取消',
bool isDestructive = false,
}) async {
final result = await show<int>(
context: context,
title: title,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (description != null) ...[
Text(
description,
style: Theme.of(context).textTheme.bodyMedium,
),
const SizedBox(height: AppSpacing.lg),
],
Row(
children: [
Expanded(
child: ShadButton.outline(
onPressed: () => Navigator.of(context).pop(0),
child: Text(cancelText),
),
),
const SizedBox(width: AppSpacing.md),
Expanded(
child: ShadButton(
backgroundColor: isDestructive
? ShadTheme.of(context).colorScheme.destructive
: null,
onPressed: () => Navigator.of(context).pop(1),
child: Text(confirmText),
),
),
],
),
],
),
);
return result == 1;
}
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
final bottomPadding = MediaQuery.of(context).padding.bottom;
return Container(
decoration: BoxDecoration(
color: theme.colorScheme.card,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppRadius.xxl),
),
),
constraints: height != null
? BoxConstraints(maxHeight: height!)
: null,
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(
left: AppSpacing.lg,
right: AppSpacing.lg,
top: AppSpacing.md,
bottom: bottomPadding + AppSpacing.lg,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 拖动指示器
if (showDragHandle) _buildDragHandle(theme),
// 标题行
if (title != null || titleWidget != null || showCloseButton)
_buildHeader(context, theme),
// 内容
child,
],
),
),
),
);
}
Widget _buildDragHandle(ShadThemeData theme) {
return Center(
child: Container(
width: 40,
height: 4,
margin: const EdgeInsets.only(bottom: AppSpacing.md),
decoration: BoxDecoration(
color: theme.colorScheme.muted,
borderRadius: BorderRadius.circular(2),
),
),
);
}
Widget _buildHeader(BuildContext context, ShadThemeData theme) {
return Padding(
padding: const EdgeInsets.only(bottom: AppSpacing.md),
child: Row(
children: [
// 标题
Expanded(
child: titleWidget ?? Text(
title!,
style: theme.textTheme.h3.copyWith(
fontWeight: FontWeight.w600,
),
),
),
// 关闭按钮
if (showCloseButton)
GestureDetector(
onTap: () {
Navigator.of(context).pop();
onClose?.call();
},
child: Icon(
LucideIcons.x,
size: 20,
color: theme.colorScheme.mutedForeground,
),
),
],
),
);
}
}
/// 操作列表
class _ActionList extends StatelessWidget {
final List<ModernSheetAction> actions;
const _ActionList({required this.actions});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Column(
children: actions.asMap().entries.map((entry) {
final index = entry.key;
final action = entry.value;
return Column(
children: [
if (index > 0 && actions[index - 1].isDivider)
Divider(color: theme.colorScheme.border, height: 1),
_ActionTile(action: action),
],
);
}).toList(),
);
}
}
/// 操作项
class _ActionTile extends StatelessWidget {
final ModernSheetAction action;
const _ActionTile({required this.action});
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return InkWell(
onTap: () {
Navigator.of(context).pop(action.returnValue);
action.onPressed?.call();
},
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: AppSpacing.md,
vertical: AppSpacing.md,
),
child: Row(
children: [
if (action.icon != null) ...[
Icon(
action.icon,
size: 20,
color: action.isDestructive
? theme.colorScheme.destructive
: theme.colorScheme.foreground,
),
const SizedBox(width: AppSpacing.md),
],
Expanded(
child: Text(
action.label,
style: TextStyle(
fontSize: 16,
color: action.isDestructive
? theme.colorScheme.destructive
: theme.colorScheme.foreground,
),
),
),
],
),
),
);
}
}
/// 底部抽屉操作配置
class ModernSheetAction {
final String label;
final IconData? icon;
final dynamic returnValue;
final bool isDestructive;
final bool isDivider;
final VoidCallback? onPressed;
const ModernSheetAction({
required this.label,
this.icon,
this.returnValue,
this.isDestructive = false,
this.isDivider = false,
this.onPressed,
});
}

207
flutter_monisuo/lib/ui/shared/modern_dialog.dart Normal file
View File

@@ -0,0 +1,207 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../core/theme/app_spacing.dart';
/// 现代弹窗模板 - 基于 modernization-v2.md 规范
///
/// 使用方法：
/// ```dart
/// ModernDialog.show(
/// context: context,
/// title: '确认操作',
/// description: '确定要执行此操作吗？',
/// actions: [
/// ModernDialogAction(label: '取消', isDestructive: false),
/// ModernDialogAction(label: '确认', isPrimary: true),
/// ],
/// );
/// ```
class ModernDialog extends StatelessWidget {
final String? title;
final Widget? titleWidget;
final String? description;
final Widget? content;
final List<ModernDialogAction>? actions;
final VoidCallback? onClose;
const ModernDialog({
super.key,
this.title,
this.titleWidget,
this.description,
this.content,
this.actions,
this.onClose,
});
/// 显示现代弹窗
static Future<T?> show<T>({
required BuildContext context,
String? title,
Widget? titleWidget,
String? description,
Widget? content,
List<ModernDialogAction>? actions,
bool barrierDismissible = true,
}) {
return showDialog<T>(
context: context,
barrierDismissible: barrierDismissible,
builder: (context) => ModernDialog(
title: title,
titleWidget: titleWidget,
description: description,
content: content,
actions: actions,
),
);
}
/// 显示确认弹窗
static Future<bool> confirm({
required BuildContext context,
required String title,
String? description,
String confirmText = '确认',
String cancelText = '取消',
bool isDestructive = false,
}) async {
final result = await show<bool>(
context: context,
title: title,
description: description,
actions: [
ModernDialogAction(label: cancelText, returnValue: false),
ModernDialogAction(
label: confirmText,
returnValue: true,
isPrimary: true,
isDestructive: isDestructive,
),
],
);
return result ?? false;
}
/// 显示信息弹窗
static Future<void> info({
required BuildContext context,
required String title,
String? description,
String buttonText = '知道了',
}) {
return show(
context: context,
title: title,
description: description,
actions: [
ModernDialogAction(label: buttonText, isPrimary: true),
],
);
}
@override
Widget build(BuildContext context) {
final theme = ShadTheme.of(context);
return Dialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppRadius.xl),
),
backgroundColor: theme.colorScheme.card,
child: Container(
padding: const EdgeInsets.all(AppSpacing.lg),
constraints: const BoxConstraints(maxWidth: 400),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题
if (titleWidget != null)
titleWidget!
else if (title != null)
Text(
title!,
style: theme.textTheme.h3.copyWith(
fontWeight: FontWeight.w600,
),
),
if (title != null || titleWidget != null)
const SizedBox(height: AppSpacing.md),
// 描述
if (description != null) ...[
Text(
description!,
style: theme.textTheme.muted,
),
const SizedBox(height: AppSpacing.md),
],
// 自定义内容
if (content != null) ...[
content!,
const SizedBox(height: AppSpacing.lg),
],
// 按钮
if (actions != null && actions!.isNotEmpty)
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: _buildActions(context),
),
],
),
),
);
}
List<Widget> _buildActions(BuildContext context) {
return actions!.asMap().entries.map((entry) {
final index = entry.key;
final action = entry.value;
return Padding(
padding: EdgeInsets.only(left: index > 0 ? AppSpacing.sm : 0),
child: _buildActionButton(context, action),
);
}).toList();
}
Widget _buildActionButton(BuildContext context, ModernDialogAction action) {
final theme = ShadTheme.of(context);
if (action.isPrimary) {
return ShadButton(
backgroundColor: action.isDestructive ? theme.colorScheme.destructive : theme.colorScheme.primary,
onPressed: () {
Navigator.of(context).pop(action.returnValue);
action.onPressed?.call();
},
child: Text(action.label),
);
}
return ShadButton.outline(
onPressed: () {
Navigator.of(context).pop(action.returnValue);
action.onPressed?.call();
},
child: Text(action.label),
);
}
}
/// 弹窗按钮配置
class ModernDialogAction {
final String label;
final dynamic returnValue;
final bool isPrimary;
final bool isDestructive;
final VoidCallback? onPressed;
const ModernDialogAction({
required this.label,
this.returnValue,
this.isPrimary = false,
this.isDestructive = false,
this.onPressed,
});
}