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/common/router/app_router.dart
+118
View File
@@ -3,6 +3,7 @@ import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import '../../features/assets/presentation/assets_page.dart';
import '../../features/assets/presentation/holding_detail_page.dart';
import '../../features/auth/presentation/delete_account_page.dart';
import '../../features/auth/presentation/login_page.dart';
import '../../features/debug/presentation/debug_info_page.dart';
@@ -11,8 +12,11 @@ import '../../features/debug/presentation/debug_shorebird_page.dart';
import '../../features/debug/presentation/fancy_dio_inspector_page.dart';
import '../../features/debug/presentation/typography_test_page.dart';
import '../../features/market/presentation/market_page.dart';
import '../../features/market/presentation/market_kline_page.dart';
import '../../features/news/presentation/news_page.dart';
import '../../features/news/presentation/news_detail_page.dart';
import '../../features/profile/presentation/profile_page.dart';
import '../../features/profile/presentation/profile_action_pages.dart';
import '../../features/settings/presentation/settings_page.dart';
import '../../features/settings/presentation/privacy_consent_page.dart';
import '../services/device_header_service.dart';
@@ -21,8 +25,22 @@ import 'tab_shell.dart';
abstract final class AppRoutes {
static const assets = '/assets';
static const market = '/market';
static const marketKline = '/market/kline';
static const news = '/news';
static const newsDetail = '/news/detail';
static const profile = '/profile';
static const profileInvite = '/profile/invite';
static const profileShare = '/profile/share';
static const profileLocalBackup = '/profile/local-backup';
static const profileCloudBackup = '/profile/cloud-backup';
static const profileWidget = '/profile/widget';
static const profilePurity = '/profile/purity';
static const profileRecycle = '/profile/recycle';
static const profilePriceColor = '/profile/price-color';
static const profileCurrency = '/profile/currency';
static const profileDisclaimer = '/profile/disclaimer';
static const profileAbout = '/profile/about';
static const assetDetail = '/assets/detail';
static const login = '/login';
static const settings = '/settings';
static const deleteAccount = '/delete-account';
@@ -73,6 +91,77 @@ final routerProvider = Provider<GoRouter>((ref) {
),
],
),
GoRoute(
path: AppRoutes.assetDetail,
builder: (ctx, s) =>
HoldingDetailPage(id: s.uri.queryParameters['id']),
),
GoRoute(
path: AppRoutes.marketKline,
builder: (ctx, s) => MarketKlinePage(
metalId: s.uri.queryParameters['metal'],
periodId: s.uri.queryParameters['period'],
),
),
GoRoute(
path: AppRoutes.newsDetail,
builder: (ctx, s) => NewsDetailPage(id: s.uri.queryParameters['id']),
),
GoRoute(
path: AppRoutes.profileInvite,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const InviteRewardPage()),
),
GoRoute(
path: AppRoutes.profileShare,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const ShareCardPage()),
),
GoRoute(
path: AppRoutes.profileLocalBackup,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const LocalBackupPage()),
),
GoRoute(
path: AppRoutes.profileCloudBackup,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const CloudBackupPage()),
),
GoRoute(
path: AppRoutes.profileWidget,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const WidgetSettingsPage()),
),
GoRoute(
path: AppRoutes.profilePurity,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const PuritySettingsPage()),
),
GoRoute(
path: AppRoutes.profileRecycle,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const RecycleDiscountPage()),
),
GoRoute(
path: AppRoutes.profilePriceColor,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const PriceColorPage()),
),
GoRoute(
path: AppRoutes.profileCurrency,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const CurrencyPage()),
),
GoRoute(
path: AppRoutes.profileDisclaimer,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const DisclaimerPage()),
),
GoRoute(
path: AppRoutes.profileAbout,
pageBuilder: (ctx, s) =>
_bottomUpPage(state: s, child: const AboutPage()),
),
GoRoute(path: AppRoutes.debug, builder: (_, s) => const DebugPage()),
GoRoute(
path: AppRoutes.login,
@@ -113,3 +202,32 @@ final routerProvider = Provider<GoRouter>((ref) {
],
);
});
CustomTransitionPage<T> _bottomUpPage<T>({
required GoRouterState state,
required Widget child,
}) {
return CustomTransitionPage<T>(
key: state.pageKey,
transitionDuration: const Duration(milliseconds: 260),
reverseTransitionDuration: const Duration(milliseconds: 220),
child: child,
transitionsBuilder: (context, animation, secondaryAnimation, pageChild) {
final curved = CurvedAnimation(
parent: animation,
curve: Curves.easeOutCubic,
reverseCurve: Curves.easeInCubic,
);
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 0.08),
end: Offset.zero,
).animate(curved),
child: FadeTransition(
opacity: curved,
child: pageChild,
),
);
},
);
}
lib/common/router/tab_shell.dart
+76 -120
View File
@@ -1,11 +1,8 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
import '../theme/app_icons.dart';
import '../widgets/adaptive.dart';
import 'app_router.dart';
class TabShell extends StatefulWidget {
const TabShell({super.key, required this.child, required this.location});
@@ -44,129 +41,88 @@ class _TabShellState extends State<TabShell> {
return Scaffold(
backgroundColor: cs.background,
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Scaffold(
backgroundColor: cs.background,
resizeToAvoidBottomInset: false,
appBar: AppBar(
backgroundColor: cs.background,
surfaceTintColor: Colors.transparent,
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: true,
toolbarHeight: 32,
leading: canPop
? IconButton(
onPressed: () => context.pop(),
icon: const Icon(Icons.chevron_left, size: 20),
)
: null,
title: AnimatedOpacity(
opacity: _showCompactHeader ? 1 : 0,
duration: const Duration(milliseconds: 160),
curve: Curves.easeOut,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
header.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: cs.foreground,
height: 1.1,
letterSpacing: 0,
),
),
if (header.subtitle != null) ...[
const SizedBox(height: 2),
Text(
header.subtitle!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w400,
color: cs.mutedForeground,
height: 1.1,
letterSpacing: 0,
),
),
],
],
appBar: AppBar(
backgroundColor: cs.background,
surfaceTintColor: Colors.transparent,
elevation: 0,
scrolledUnderElevation: 0,
centerTitle: true,
toolbarHeight: 32,
leading: canPop
? IconButton(
onPressed: () => context.pop(),
icon: const Icon(Icons.chevron_left, size: 20),
)
: null,
title: AnimatedOpacity(
opacity: _showCompactHeader ? 1 : 0,
duration: const Duration(milliseconds: 160),
curve: Curves.easeOut,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
header.title,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
color: cs.foreground,
height: 1.1,
letterSpacing: 0,
),
),
),
body: ColoredBox(
color: cs.background,
child: NotificationListener<ScrollNotification>(
onNotification: _handleScrollNotification,
child: Stack(children: [Positioned.fill(child: widget.child)]),
),
),
bottomNavigationBar: SafeArea(
top: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
DecoratedBox(
decoration: BoxDecoration(
color: cs.background,
border: Border(
top: BorderSide(color: cs.border, width: 1),
),
),
child: SizedBox(
height: 62,
// 平板：tab 行限宽 600 居中（demo .nav .tabs）
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: Adaptive.tabsMaxWidth,
),
child: Row(
children: [
for (var i = 0; i < _tabs.length; i++)
Expanded(
child: _TabButton(
icon: i == _index
? _filledIcons[i]
: _outlineIcons[i],
label: _labels[i],
selected: i == _index,
onTap: () => context.go(_tabs[i]),
),
),
],
),
),
),
if (header.subtitle != null) ...[
const SizedBox(height: 2),
Text(
header.subtitle!,
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.w400,
color: cs.mutedForeground,
height: 1.1,
letterSpacing: 0,
),
),
],
],
),
),
),
body: ColoredBox(
color: cs.background,
child: NotificationListener<ScrollNotification>(
onNotification: _handleScrollNotification,
child: Stack(children: [Positioned.fill(child: widget.child)]),
),
),
bottomNavigationBar: DecoratedBox(
decoration: BoxDecoration(
color: cs.background,
border: Border(top: BorderSide(color: cs.border, width: 1)),
),
child: SafeArea(
top: false,
child: SizedBox(
height: 62,
child: Row(
children: [
for (var i = 0; i < _tabs.length; i++)
Expanded(
child: _TabButton(
icon: i == _index ? _filledIcons[i] : _outlineIcons[i],
label: _labels[i],
selected: i == _index,
onTap: () => context.go(_tabs[i]),
),
),
],
),
],
),
),
if (!kReleaseMode)
Positioned(
right: 16,
bottom: 88,
child: FilledButton(
onPressed: () => context.push(AppRoutes.fancyDioInspector),
style: FilledButton.styleFrom(
backgroundColor: cs.primary,
foregroundColor: cs.primaryForeground,
minimumSize: const Size(60, 60),
shape: const CircleBorder(),
padding: EdgeInsets.zero,
),
child: const Text('请求'),
),
),
],
),
),
);
}
lib/common/widgets/prototype_ui.dart
+292
View File
@@ -0,0 +1,292 @@
import 'package:flutter/material.dart';
import 'package:shadcn_ui/shadcn_ui.dart';
class PrototypeFrame extends StatelessWidget {
const PrototypeFrame({
super.key,
required this.child,
this.top = 0,
this.bottom = 24,
});
final Widget child;
final double top;
final double bottom;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(18, top, 18, bottom),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 760),
child: child,
),
),
);
}
}
class PrototypeCard extends StatelessWidget {
const PrototypeCard({
super.key,
required this.child,
this.padding = const EdgeInsets.all(16),
this.margin,
this.radius = 14,
this.decoration,
});
final Widget child;
final EdgeInsetsGeometry padding;
final EdgeInsetsGeometry? margin;
final double radius;
final BoxDecoration? decoration;
@override
Widget build(BuildContext context) {
final cs = ShadTheme.of(context).colorScheme;
return Container(
margin: margin,
decoration: decoration ??
BoxDecoration(
color: cs.card,
border: Border.all(color: cs.border, width: 0.5),
borderRadius: BorderRadius.circular(radius),
),
child: Padding(padding: padding, child: child),
);
}
}
class PrototypePill extends StatelessWidget {
const PrototypePill({
super.key,
required this.label,
this.selected = false,
this.leading,
this.onTap,
});
final String label;
final bool selected;
final Widget? leading;
final VoidCallback? onTap;
@override
Widget build(BuildContext context) {
final cs = ShadTheme.of(context).colorScheme;
final bg = selected ? cs.secondary : cs.background;
final fg = selected ? cs.secondaryForeground : cs.mutedForeground;
final borderColor = selected ? const Color(0xFFE3D6B4) : cs.border;
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(999),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: bg,
borderRadius: BorderRadius.circular(999),
border: Border.all(color: borderColor, width: 0.5),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (leading != null) ...[leading!, const SizedBox(width: 4)],
Text(
label,
style: TextStyle(
fontSize: 12,
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
color: fg,
),
),
],
),
),
);
}
}
class PrototypeMetricChip extends StatelessWidget {
const PrototypeMetricChip({
super.key,
required this.label,
required this.value,
this.valueColor,
this.background,
});
final String label;
final String value;
final Color? valueColor;
final Color? background;
@override
Widget build(BuildContext context) {
final cs = ShadTheme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: background ?? cs.background,
borderRadius: BorderRadius.circular(999),
border: Border.all(color: cs.border, width: 0.5),
),
child: RichText(
text: TextSpan(
style: TextStyle(fontSize: 10, color: cs.mutedForeground),
children: [
TextSpan(text: '$label '),
TextSpan(
text: value,
style: TextStyle(
fontWeight: FontWeight.w600,
color: valueColor ?? cs.foreground,
),
),
],
),
),
);
}
}
class PrototypeLineChart extends StatelessWidget {
const PrototypeLineChart({
super.key,
required this.values,
this.lineColor = const Color(0xFFB5862A),
this.fillColor = const Color(0xFFF7EFD9),
});
final List<double> values;
final Color lineColor;
final Color fillColor;
@override
Widget build(BuildContext context) {
return CustomPaint(
painter: _PrototypeLineChartPainter(
values: values,
lineColor: lineColor,
fillColor: fillColor,
),
size: Size.infinite,
);
}
}
class _PrototypeLineChartPainter extends CustomPainter {
_PrototypeLineChartPainter({
required this.values,
required this.lineColor,
required this.fillColor,
});
final List<double> values;
final Color lineColor;
final Color fillColor;
@override
void paint(Canvas canvas, Size size) {
if (values.isEmpty || size.isEmpty) return;
final paintGrid = Paint()
..color = const Color(0xFFECEAE3)
..strokeWidth = 1;
final paintLine = Paint()
..color = lineColor
..style = PaintingStyle.stroke
..strokeWidth = 2.4
..strokeJoin = StrokeJoin.round
..strokeCap = StrokeCap.round;
final paintFill = Paint()
..color = fillColor
..style = PaintingStyle.fill;
const padTop = 10.0;
const padBottom = 10.0;
final plotHeight = size.height - padTop - padBottom;
final plotWidth = size.width;
final min = values.reduce((a, b) => a < b ? a : b);
final max = values.reduce((a, b) => a > b ? a : b);
final span = (max - min).abs() < 0.0001 ? 1.0 : max - min;
Offset pointFor(int index) {
final x = values.length == 1
? plotWidth / 2
: index / (values.length - 1) * plotWidth;
final y = padTop + (1 - (values[index] - min) / span) * plotHeight;
return Offset(x, y);
}
for (var i = 0; i < 4; i++) {
final dy = padTop + plotHeight * i / 3;
canvas.drawLine(Offset(0, dy), Offset(size.width, dy), paintGrid);
}
final pts = List.generate(values.length, pointFor);
final path = Path()..moveTo(pts.first.dx, pts.first.dy);
for (final p in pts.skip(1)) {
path.lineTo(p.dx, p.dy);
}
final fillPath = Path()
..addPath(path, Offset.zero)
..lineTo(size.width, size.height)
..lineTo(0, size.height)
..close();
canvas.drawPath(fillPath, paintFill);
canvas.drawPath(path, paintLine);
final last = pts.last;
canvas.drawCircle(last, 3.8, Paint()..color = lineColor);
}
@override
bool shouldRepaint(covariant _PrototypeLineChartPainter oldDelegate) {
return oldDelegate.values != values ||
oldDelegate.lineColor != lineColor ||
oldDelegate.fillColor != fillColor;
}
}
class PrototypeSectionLabel extends StatelessWidget {
const PrototypeSectionLabel(this.label, {super.key, this.trailing});
final String label;
final Widget? trailing;
@override
Widget build(BuildContext context) {
final cs = ShadTheme.of(context).colorScheme;
return Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Row(
children: [
Text(
label,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: cs.foreground,
),
),
const Spacer(),
if (trailing != null) trailing!,
],
),
);
}
}
class PrototypeDivider extends StatelessWidget {
const PrototypeDivider({super.key, this.margin = const EdgeInsets.symmetric(vertical: 10)});
final EdgeInsetsGeometry margin;
@override
Widget build(BuildContext context) {
final cs = ShadTheme.of(context).colorScheme;
return Container(
margin: margin,
height: 0.5,
color: cs.border,
);
}
}