fix(theme): 修复组件主题硬编码问题

- asset_card: Colors.white/black → colorScheme
- gradient_button: Colors.white → onPrimary
- trade_button: Colors.white → onPrimary
- 支持亮/暗主题动态切换
This commit is contained in:
2026-03-24 08:45:54 +08:00
parent 13841b1958
commit b4eeb61aa1
3 changed files with 34 additions and 22 deletions

View File

@@ -52,9 +52,14 @@ class AssetCard extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = ShadTheme.of(context); final theme = ShadTheme.of(context);
final colorScheme = Theme.of(context).colorScheme;
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final cardGradient = gradient ?? defaultGradientBuilder(isDark); final cardGradient = gradient ?? defaultGradientBuilder(isDark);
// 主题感知颜色 - 在渐变背景上使用 onPrimary
final primaryTextColor = colorScheme.onPrimary;
final secondaryTextColor = colorScheme.onPrimary.withValues(alpha: 0.7);
return GestureDetector( return GestureDetector(
onTap: onTap, onTap: onTap,
child: Container( child: Container(
@@ -65,7 +70,7 @@ class AssetCard extends StatelessWidget {
borderRadius: BorderRadius.circular(AppRadius.xl), borderRadius: BorderRadius.circular(AppRadius.xl),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withValues(alpha: 0.1), color: colorScheme.onSurface.withValues(alpha: 0.1),
blurRadius: 10, blurRadius: 10,
offset: const Offset(0, 4), offset: const Offset(0, 4),
), ),
@@ -79,13 +84,13 @@ class AssetCard extends StatelessWidget {
children: [ children: [
Text( Text(
title, title,
style: theme.textTheme.small.copyWith(color: Colors.white70), style: theme.textTheme.small.copyWith(color: secondaryTextColor),
), ),
const Spacer(), const Spacer(),
if (onTap != null) if (onTap != null)
const Icon( Icon(
LucideIcons.chevronRight, LucideIcons.chevronRight,
color: Colors.white70, color: secondaryTextColor,
size: 18, size: 18,
), ),
], ],
@@ -96,7 +101,7 @@ class AssetCard extends StatelessWidget {
balance, balance,
style: theme.textTheme.h1.copyWith( style: theme.textTheme.h1.copyWith(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white, color: primaryTextColor,
fontSize: 32, fontSize: 32,
), ),
), ),
@@ -107,13 +112,13 @@ class AssetCard extends StatelessWidget {
children: [ children: [
Icon( Icon(
isProfit == true ? LucideIcons.trendingUp : LucideIcons.trendingDown, isProfit == true ? LucideIcons.trendingUp : LucideIcons.trendingDown,
color: Colors.white70, color: secondaryTextColor,
size: 16, size: 16,
), ),
const SizedBox(width: 6), const SizedBox(width: 6),
Text( Text(
'盈亏: $profit', '盈亏: $profit',
style: theme.textTheme.small.copyWith(color: Colors.white70), style: theme.textTheme.small.copyWith(color: secondaryTextColor),
), ),
], ],
), ),
@@ -123,7 +128,7 @@ class AssetCard extends StatelessWidget {
const SizedBox(height: AppSpacing.lg), const SizedBox(height: AppSpacing.lg),
Row( Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: items!.map((item) => _buildItem(item)).toList(), children: items!.map((item) => _buildItem(item, primaryTextColor, secondaryTextColor)).toList(),
), ),
], ],
], ],
@@ -132,21 +137,21 @@ class AssetCard extends StatelessWidget {
).animate().fadeIn(duration: 400.ms).slideY(begin: 0.1, end: 0); ).animate().fadeIn(duration: 400.ms).slideY(begin: 0.1, end: 0);
} }
Widget _buildItem(AssetItem item) { Widget _buildItem(AssetItem item, Color primaryTextColor, Color secondaryTextColor) {
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Text( Text(
item.label, item.label,
style: const TextStyle(fontSize: 12, color: Colors.white70), style: TextStyle(fontSize: 12, color: secondaryTextColor),
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
Text( Text(
item.value, item.value,
style: const TextStyle( style: TextStyle(
fontSize: 18, fontSize: 18,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: Colors.white, color: primaryTextColor,
), ),
), ),
], ],

View File

@@ -96,6 +96,9 @@ class GradientButton extends StatelessWidget {
final buttonGradient = gradient ?? final buttonGradient = gradient ??
(isDark ? AppColorScheme.darkCtaGradient : AppColorScheme.lightCtaGradient); (isDark ? AppColorScheme.darkCtaGradient : AppColorScheme.lightCtaGradient);
// 主题感知颜色 - 在渐变背景上使用 onPrimary
final textColor = colorScheme.onPrimary;
return Container( return Container(
width: isFullWidth ? double.infinity : null, width: isFullWidth ? double.infinity : null,
height: height, height: height,
@@ -114,23 +117,23 @@ class GradientButton extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
if (isLoading) if (isLoading)
const SizedBox( SizedBox(
width: 20, width: 20,
height: 20, height: 20,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
color: Colors.white, color: textColor,
), ),
) )
else ...[ else ...[
if (icon != null) ...[ if (icon != null) ...[
Icon(icon, size: 18, color: Colors.white), Icon(icon, size: 18, color: textColor),
SizedBox(width: AppSpacing.sm), SizedBox(width: AppSpacing.sm),
], ],
Text( Text(
text, text,
style: const TextStyle( style: TextStyle(
color: Colors.white, color: textColor,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),

View File

@@ -45,11 +45,15 @@ class TradeButton extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final gradient = isBuy ? AppColorScheme.buyGradient : AppColorScheme.sellGradient; final gradient = isBuy ? AppColorScheme.buyGradient : AppColorScheme.sellGradient;
final text = isBuy final text = isBuy
? '买入${coinCode != null ? ' $coinCode' : ''}' ? '买入${coinCode != null ? ' $coinCode' : ''}'
: '卖出${coinCode != null ? ' $coinCode' : ''}'; : '卖出${coinCode != null ? ' $coinCode' : ''}';
// 主题感知颜色 - 在渐变背景上使用 onPrimary
final textColor = colorScheme.onPrimary;
return Container( return Container(
width: fullWidth ? double.infinity : null, width: fullWidth ? double.infinity : null,
height: 48, height: 48,
@@ -68,24 +72,24 @@ class TradeButton extends StatelessWidget {
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
if (isLoading) if (isLoading)
const SizedBox.square( SizedBox.square(
dimension: 16, dimension: 16,
child: CircularProgressIndicator( child: CircularProgressIndicator(
strokeWidth: 2, strokeWidth: 2,
color: Colors.white, color: textColor,
), ),
) )
else else
Icon( Icon(
isBuy ? Icons.arrow_downward_rounded : Icons.arrow_upward_rounded, isBuy ? Icons.arrow_downward_rounded : Icons.arrow_upward_rounded,
size: 18, size: 18,
color: Colors.white, color: textColor,
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Text( Text(
text, text,
style: const TextStyle( style: TextStyle(
color: Colors.white, color: textColor,
fontSize: 16, fontSize: 16,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),