fix(theme): 修复组件主题硬编码问题
- asset_card: Colors.white/black → colorScheme - gradient_button: Colors.white → onPrimary - trade_button: Colors.white → onPrimary - 支持亮/暗主题动态切换
This commit is contained in:
@@ -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,
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -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,
|
||||||
),
|
),
|
||||||
|
|||||||
@@ -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,
|
||||||
),
|
),
|
||||||
|
|||||||
Reference in New Issue
Block a user