maobo/jinzhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：靠原型不齐页面

Browse Source
This commit is contained in:
jingyun
2026-06-18 16:53:08 +08:00
parent 35eed6b5b8
commit f42ad566e0
14 changed files with 4013 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/market/presentation/market_kline_page.dart
+194
View File
@@ -0,0 +1,194 @@
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../../common/domain/metal_type.dart';
import '../../../common/widgets/prototype_ui.dart';
import '../data/mock_market_repository.dart';
import '../data/market_models.dart';
class MarketKlinePage extends ConsumerWidget {
const MarketKlinePage({super.key, this.metalId, this.periodId});
final String? metalId;
final String? periodId;
@override
Widget build(BuildContext context, WidgetRef ref) {
final repo = ref.watch(mockMarketRepositoryProvider);
final metal = _metalFromId(metalId) ?? MetalType.gold;
final period = _periodFromId(periodId) ?? MarketPeriod.h24;
final quote = repo.quoteFor(metal);
final points = repo.chartFor(metal, period);
final cs = ShadTheme.of(context).colorScheme;
return Scaffold(
backgroundColor: const Color(0xFFFBFAF7),
appBar: AppBar(
backgroundColor: const Color(0xFFFBFAF7),
surfaceTintColor: Colors.transparent,
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: true,
leading: IconButton(
onPressed: () => Navigator.of(context).pop(),
icon: const Icon(Icons.chevron_left, size: 20),
),
title: Text(
'${metal.label} K线',
style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
),
),
body: SafeArea(
child: ListView(
padding: const EdgeInsets.fromLTRB(0, 8, 0, 24),
children: [
PrototypeFrame(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 4),
PrototypeCard(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'¥',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: cs.foreground,
),
),
const SizedBox(width: 2),
Text(
quote.spotPrice.toStringAsFixed(2),
style: const TextStyle(
fontSize: 29,
fontWeight: FontWeight.w600,
letterSpacing: -1,
),
),
const SizedBox(width: 4),
const Padding(
padding: EdgeInsets.only(top: 8),
child: Text('元/克', style: TextStyle(fontSize: 12, color: Color(0xFF8A8780))),
),
],
),
const SizedBox(height: 6),
Text(
'${quote.changeAmount >= 0 ? '+' : ''}${quote.changeAmount.toStringAsFixed(2)} · ${quote.changePercent.toStringAsFixed(2)}%',
style: TextStyle(
color: quote.changeAmount >= 0
? const Color(0xFFC0392B)
: const Color(0xFF2E8B6F),
fontSize: 13,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 12),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (final p in MarketPeriod.values)
PrototypePill(
label: p.label,
selected: p == period,
onTap: () => Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (_) => MarketKlinePage(
metalId: metal.id,
periodId: p.id,
),
),
),
),
],
),
const SizedBox(height: 10),
Row(
children: [
_Ohlc('开', points.first.open),
const SizedBox(width: 18),
_Ohlc('高', points.map((e) => e.high).reduce((a, b) => a > b ? a : b)),
const SizedBox(width: 18),
_Ohlc('低', points.map((e) => e.low).reduce((a, b) => a < b ? a : b)),
const SizedBox(width: 18),
_Ohlc('收', points.last.close),
],
),
const SizedBox(height: 12),
SizedBox(
height: 300,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: PrototypeLineChart(
values: points.map((p) => p.close).toList(growable: false),
),
),
),
const SizedBox(height: 10),
Text(
'${quote.basisLabel} · ${_timeLabel(quote.updatedAt)}',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 11, color: cs.mutedForeground),
),
],
),
),
],
),
),
],
),
),
);
}
}
class _Ohlc extends StatelessWidget {
const _Ohlc(this.label, this.value);
final String label;
final double value;
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: const TextStyle(fontSize: 12, color: Color(0xFF8A8780))),
const SizedBox(height: 2),
Text(value.toStringAsFixed(2), style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600)),
],
);
}
}
MetalType? _metalFromId(String? id) {
return switch (id) {
'gold' => MetalType.gold,
'platinum' => MetalType.platinum,
'silver' => MetalType.silver,
_ => null,
};
}
MarketPeriod? _periodFromId(String? id) {
return switch (id) {
'24h' => MarketPeriod.h24,
'5d' => MarketPeriod.d5,
'1m' => MarketPeriod.m1,
'3m' => MarketPeriod.m3,
'1y' => MarketPeriod.y1,
_ => null,
};
}
String _timeLabel(DateTime value) {
return '${value.hour.toString().padLeft(2, '0')}:${value.minute.toString().padLeft(2, '0')}';
}
lib/features/market/presentation/market_page.dart
+367 -127
View File
@@ -1,149 +1,314 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../../../common/domain/metal_type.dart';
import '../../../common/domain/money.dart';
import '../../../common/widgets/adaptive.dart';
import '../../../common/router/app_router.dart';
import '../../../common/widgets/prototype_ui.dart';
import '../application/exchange_calculator_controller.dart';
import '../application/market_controller.dart';
import '../data/market_models.dart';
class MarketPage extends ConsumerWidget {
class MarketPage extends HookConsumerWidget {
const MarketPage({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final market = ref.watch(marketControllerProvider);
final exchange = ref.watch(exchangeCalculatorControllerProvider);
final gramCtrl = useTextEditingController(text: exchange.gram.toStringAsFixed(2));
final amountCtrl = useTextEditingController(text: exchange.amount.toStringAsFixed(2));
final gramFocus = useFocusNode();
final amountFocus = useFocusNode();
final cs = ShadTheme.of(context).colorScheme;
useEffect(() {
if (!gramFocus.hasFocus) {
gramCtrl.text = exchange.gram.toStringAsFixed(
exchange.gram % 1 == 0 ? 0 : 2,
);
}
if (!amountFocus.hasFocus) {
amountCtrl.text = exchange.amount.toStringAsFixed(2);
}
return null;
}, [exchange.gram, exchange.amount, exchange.selectedChannel.id, exchange.metal.id]);
return SafeArea(
top: false,
child: ListView(
padding: const EdgeInsets.fromLTRB(18, 18, 18, 24),
padding: const EdgeInsets.fromLTRB(0, 8, 0, 86),
children: [
Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: Adaptive.contentMaxWidth,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SegmentedButton<MetalType>(
segments: [
for (final metal in MetalType.values)
ButtonSegment(value: metal, label: Text(metal.label)),
],
selected: {market.selectedMetal},
onSelectionChanged: (next) {
final metal = next.first;
ref
.read(marketControllerProvider.notifier)
.selectMetal(metal);
ref
.read(exchangeCalculatorControllerProvider.notifier)
.selectMetal(metal);
PrototypeFrame(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
children: [
const Text(
'行情',
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
),
const Spacer(),
Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: const Color(0xFFF7F4EE),
borderRadius: BorderRadius.circular(999),
),
child: const Icon(
Icons.notifications_none_outlined,
size: 18,
color: Color(0xFF9A968D),
),
),
],
),
const SizedBox(height: 14),
SizedBox(
height: 32,
child: ListView.separated(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: MetalType.values.length,
separatorBuilder: (context, index) => const SizedBox(width: 8),
itemBuilder: (context, index) {
final metal = MetalType.values[index];
return PrototypePill(
label: metal.label,
selected: metal == market.selectedMetal,
onTap: () {
ref.read(marketControllerProvider.notifier).selectMetal(metal);
ref.read(exchangeCalculatorControllerProvider.notifier).selectMetal(metal);
},
);
},
),
const SizedBox(height: 12),
_Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(market.quote.basisLabel, style: _mutedStyle(cs)),
const SizedBox(height: 8),
Text(
'${formatCny(market.quote.spotPrice)} / 克',
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w800,
color: cs.foreground,
),
const SizedBox(height: 10),
PrototypeCard(
padding: const EdgeInsets.fromLTRB(14, 12, 14, 13),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
'¥',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: cs.foreground,
),
),
),
const SizedBox(height: 6),
Text(
'${market.quote.changeAmount >= 0 ? '+' : ''}${market.quote.changeAmount.toStringAsFixed(2)} · ${market.quote.changePercent.toStringAsFixed(2)}%',
style: TextStyle(
color: market.quote.changeAmount >= 0
? const Color(0xFFC0392B)
: const Color(0xFF2E8B6F),
const SizedBox(width: 2),
Text(
formatCny(market.quote.spotPrice).replaceFirst('¥', ''),
style: TextStyle(
fontSize: 29,
fontWeight: FontWeight.w600,
color: cs.foreground,
letterSpacing: -1,
height: 1,
),
),
),
const SizedBox(height: 14),
Wrap(
spacing: 8,
children: [
for (final period in MarketPeriod.values)
ChoiceChip(
label: Text(period.label),
selected: period == market.period,
onSelected: (_) => ref
.read(marketControllerProvider.notifier)
.selectPeriod(period),
),
const Padding(
padding: EdgeInsets.only(left: 4, bottom: 2),
child: Text(
'元/克',
style: TextStyle(fontSize: 12, color: Color(0xFF8A8780)),
),
),
],
),
const SizedBox(height: 6),
Row(
children: [
_ChangeChip(amount: market.quote.changeAmount, percent: market.quote.changePercent),
const SizedBox(width: 8),
Text(
'报价 ${_timeLabel(market.quote.updatedAt)}',
style: const TextStyle(fontSize: 12, color: Color(0xFF8A8780)),
),
const Spacer(),
GestureDetector(
onTap: () {},
child: const Icon(Icons.info_outline, size: 16, color: Color(0xFFB3AFA5)),
),
],
),
const SizedBox(height: 10),
Row(
children: [
for (final period in MarketPeriod.values) ...[
_PeriodPill(
label: period.label,
selected: period == market.period,
onTap: () => ref.read(marketControllerProvider.notifier).selectPeriod(period),
),
if (period != MarketPeriod.values.last) const SizedBox(width: 6),
],
],
),
const SizedBox(height: 8),
GestureDetector(
onTap: () => context.push(
'${AppRoutes.marketKline}?metal=${market.selectedMetal.id}&period=${market.period.id}',
),
const SizedBox(height: 14),
Text(
'走势图 mock 点位：${market.points.length} 个',
style: _mutedStyle(cs),
child: SizedBox(
height: 88,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: PrototypeLineChart(
values: market.points.map((p) => p.close).toList(growable: false),
),
),
),
),
const SizedBox(height: 10),
Container(height: 0.5, color: cs.border),
const SizedBox(height: 10),
Row(
children: [
const Text(
'兑换试算',
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w600),
),
const Spacer(),
const PrototypePill(label: '多渠道参考', selected: true),
],
),
const SizedBox(height: 8),
SizedBox(
height: 32,
child: ListView.separated(
scrollDirection: Axis.horizontal,
physics: const BouncingScrollPhysics(),
itemCount: exchange.channels.length,
separatorBuilder: (context, index) => const SizedBox(width: 7),
itemBuilder: (context, index) {
final channel = exchange.channels[index];
return PrototypePill(
label: channel.name,
selected: channel.id == exchange.selectedChannel.id,
onTap: () => ref
.read(exchangeCalculatorControllerProvider.notifier)
.selectChannel(channel.id),
);
},
),
),
const SizedBox(height: 10),
if (!exchange.swapped) ...[
_ExchangeField(
controller: gramCtrl,
focusNode: gramFocus,
unit: exchange.metal.label,
leading: '克',
onChanged: (value) {
final gram = double.tryParse(value) ?? 0;
ref.read(exchangeCalculatorControllerProvider.notifier).setGram(gram);
},
),
const SizedBox(height: 8),
Center(
child: GestureDetector(
onTap: () => ref.read(exchangeCalculatorControllerProvider.notifier).toggleSwapped(),
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: cs.border, width: 0.5),
shape: BoxShape.circle,
boxShadow: const [
BoxShadow(
color: Color(0x1F281F0C),
blurRadius: 7,
offset: Offset(0, 2),
),
],
),
child: const Icon(Icons.swap_vert, size: 16, color: Color(0xFFB5862A)),
),
),
),
const SizedBox(height: 8),
_ExchangeField(
controller: amountCtrl,
focusNode: amountFocus,
unit: 'CNY',
leading: '¥',
onChanged: (value) {
final amount = double.tryParse(value) ?? 0;
ref.read(exchangeCalculatorControllerProvider.notifier).setAmount(amount);
},
),
] else ...[
_ExchangeField(
controller: amountCtrl,
focusNode: amountFocus,
unit: 'CNY',
leading: '¥',
onChanged: (value) {
final amount = double.tryParse(value) ?? 0;
ref.read(exchangeCalculatorControllerProvider.notifier).setAmount(amount);
},
),
const SizedBox(height: 8),
Center(
child: GestureDetector(
onTap: () => ref.read(exchangeCalculatorControllerProvider.notifier).toggleSwapped(),
child: Container(
width: 30,
height: 30,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: cs.border, width: 0.5),
shape: BoxShape.circle,
boxShadow: const [
BoxShadow(
color: Color(0x1F281F0C),
blurRadius: 7,
offset: Offset(0, 2),
),
],
),
child: const Icon(Icons.swap_vert, size: 16, color: Color(0xFFB5862A)),
),
),
),
const SizedBox(height: 8),
_ExchangeField(
controller: gramCtrl,
focusNode: gramFocus,
unit: exchange.metal.label,
leading: '克',
onChanged: (value) {
final gram = double.tryParse(value) ?? 0;
ref.read(exchangeCalculatorControllerProvider.notifier).setGram(gram);
},
),
],
),
const SizedBox(height: 10),
Text(
'1 克 ${exchange.metal.label} = ${formatCny(exchange.selectedChannel.pricePerGram)} · ${exchange.selectedChannel.source} · 参考',
style: const TextStyle(fontSize: 12, color: Color(0xFF6E6A60)),
),
const SizedBox(height: 5),
Text(
exchange.selectedChannel.hint,
style: const TextStyle(fontSize: 11, color: Color(0xFFB3AFA5), height: 1.5),
),
],
),
const SizedBox(height: 12),
_Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'兑换试算',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: cs.foreground,
),
),
const SizedBox(height: 10),
Text(
'${formatGram(exchange.gram)} ${exchange.metal.label} = ${formatCny(exchange.amount)}',
style: TextStyle(fontSize: 20, color: cs.foreground),
),
const SizedBox(height: 8),
Text(
'1 克 ${exchange.metal.label} = ${formatCny(exchange.selectedChannel.pricePerGram)} · ${exchange.selectedChannel.source}',
style: _mutedStyle(cs),
),
const SizedBox(height: 10),
Wrap(
spacing: 8,
runSpacing: 8,
children: [
for (final channel in exchange.channels)
ChoiceChip(
label: Text(channel.name),
selected:
channel.id == exchange.selectedChannel.id,
onSelected: (_) => ref
.read(
exchangeCalculatorControllerProvider
.notifier,
)
.selectChannel(channel.id),
),
],
),
const SizedBox(height: 8),
Text(
exchange.selectedChannel.hint,
style: _mutedStyle(cs),
),
],
),
),
],
),
),
],
),
),
],
@@ -152,25 +317,100 @@ class MarketPage extends ConsumerWidget {
}
}
class _Card extends StatelessWidget {
const _Card({required this.child});
class _ExchangeField extends StatelessWidget {
const _ExchangeField({
required this.controller,
required this.focusNode,
required this.unit,
required this.leading,
required this.onChanged,
});
final Widget child;
final TextEditingController controller;
final FocusNode focusNode;
final String unit;
final String leading;
final ValueChanged<String> onChanged;
@override
Widget build(BuildContext context) {
final cs = ShadTheme.of(context).colorScheme;
return DecoratedBox(
return Container(
padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 9),
decoration: BoxDecoration(
color: cs.card,
border: Border.all(color: cs.border),
borderRadius: BorderRadius.circular(12),
color: Colors.white,
borderRadius: BorderRadius.circular(13),
border: Border.all(color: const Color(0xFFE3D6B4), width: 0.5),
),
child: Row(
children: [
Text(leading, style: const TextStyle(fontSize: 14, color: Color(0xFF8A8780))),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: controller,
focusNode: focusNode,
keyboardType: const TextInputType.numberWithOptions(decimal: true),
textAlign: TextAlign.right,
decoration: const InputDecoration(
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.zero,
),
style: const TextStyle(fontSize: 21, fontWeight: FontWeight.w600),
onChanged: onChanged,
),
),
const SizedBox(width: 8),
Text(
unit,
style: const TextStyle(fontSize: 14, color: Color(0xFF8A8780)),
),
],
),
child: Padding(padding: const EdgeInsets.all(16), child: child),
);
}
}
TextStyle _mutedStyle(ShadColorScheme cs) {
return TextStyle(fontSize: 13, color: cs.mutedForeground, letterSpacing: 0);
class _PeriodPill extends StatelessWidget {
const _PeriodPill({required this.label, required this.selected, required this.onTap});
final String label;
final bool selected;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return PrototypePill(label: label, selected: selected, onTap: onTap);
}
}
class _ChangeChip extends StatelessWidget {
const _ChangeChip({required this.amount, required this.percent});
final double amount;
final double percent;
@override
Widget build(BuildContext context) {
final positive = amount >= 0;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: positive ? const Color(0xFFFBEDEA) : const Color(0xFFE7F2EE),
borderRadius: BorderRadius.circular(999),
),
child: Text(
'${positive ? '↑' : '↓'}¥${amount.abs().toStringAsFixed(2)} · ${positive ? '+' : '-'}${percent.abs().toStringAsFixed(2)}%',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: positive ? const Color(0xFFC0392B) : const Color(0xFF2E8B6F),
),
),
);
}
}
String _timeLabel(DateTime value) {
return '${value.hour.toString().padLeft(2, '0')}:${value.minute.toString().padLeft(2, '0')}';
}