Skip to content

Commit a882055

Browse files
LHGS-githubLHGS-github
committed
ui:界面美化
1 parent a546e0f commit a882055

File tree

4 files changed

+222
-57
lines changed

4 files changed

+222
-57
lines changed

‎namepicker/assets/avaters/lhgser.jpg‎

253 KB
Loading

‎namepicker/lib/main.dart‎

Lines changed: 172 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -330,53 +330,134 @@ class _MyHomePageState extends State<MyHomePage> {
330330
class CustomTitleBar extends StatelessWidget {
331331
@override
332332
Widget build(BuildContext context) {
333+
final colorScheme = Theme.of(context).colorScheme;
333334
return GestureDetector(
334335
behavior: HitTestBehavior.translucent,
335336
onPanStart: (_) {
336337
windowManager.startDragging();
337338
},
338339
child: Container(
339-
height: 36,
340+
height: 40,
340341
decoration: BoxDecoration(
341-
color: Theme.of(context).colorScheme.surfaceContainerHighest,
342-
border: Border(bottom: BorderSide(color: Theme.of(context).dividerColor)),
342+
gradient: LinearGradient(
343+
colors: [
344+
colorScheme.surfaceContainerHighest.withOpacity(0.95),
345+
colorScheme.primary.withOpacity(0.08),
346+
],
347+
begin: Alignment.topLeft,
348+
end: Alignment.bottomRight,
349+
),
350+
border: Border(bottom: BorderSide(color: colorScheme.outlineVariant, width: 1)),
351+
boxShadow: [
352+
BoxShadow(
353+
color: colorScheme.shadow.withOpacity(0.08),
354+
blurRadius: 8,
355+
offset: Offset(0, 2),
356+
),
357+
],
343358
),
344359
child: Row(
345360
children: [
361+
SizedBox(width: 12),
362+
ClipRRect(
363+
borderRadius: BorderRadius.circular(6),
364+
child: Image.asset('assets/NamePicker.png', width: 28, height: 28),
365+
),
366+
SizedBox(width: 10),
367+
Text(
368+
'NamePicker',
369+
style: TextStyle(
370+
fontSize: 18,
371+
fontWeight: FontWeight.w700,
372+
fontFamily: "HarmonyOS_Sans_SC",
373+
color: colorScheme.primary,
374+
letterSpacing: 1.2,
375+
),
376+
),
346377
SizedBox(width: 8),
347-
SafeArea(child: Image(image: AssetImage('assets/NamePicker.png',),width: 20,height: 20,)),
348-
SizedBox(width: 8),
349-
Text('NamePicker', style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
378+
Container(
379+
width: 1, height: 20,
380+
color: colorScheme.outlineVariant,
381+
),
350382
Spacer(),
351-
IconButton(
352-
icon: Icon(Icons.minimize, size: 18),
383+
_TitleBarButton(
384+
icon: Icons.minimize,
353385
tooltip: '最小化',
354-
onPressed: () => windowManager.minimize(),
386+
onTap: () => windowManager.minimize(),
387+
color: colorScheme.onSurfaceVariant,
355388
),
356-
IconButton(
357-
icon: Icon(Icons.crop_square, size: 18),
389+
_TitleBarButton(
390+
icon: Icons.crop_square,
358391
tooltip: '最大化/还原',
359-
onPressed: () async {
392+
onTap: () async {
360393
bool isMax = await windowManager.isMaximized();
361394
if (isMax) {
362395
await windowManager.unmaximize();
363396
} else {
364397
await windowManager.maximize();
365398
}
366399
},
400+
color: colorScheme.onSurfaceVariant,
367401
),
368-
IconButton(
369-
icon: Icon(Icons.close, size: 18),
402+
_TitleBarButton(
403+
icon: Icons.close,
370404
tooltip: '关闭',
371-
onPressed: () => windowManager.close(),
405+
onTap: () => windowManager.close(),
406+
color: colorScheme.error,
407+
hoverColor: colorScheme.errorContainer,
372408
),
409+
SizedBox(width: 8),
373410
],
374411
),
375412
),
376413
);
377414
}
378415
}
379416

417+
class _TitleBarButton extends StatefulWidget {
418+
final IconData icon;
419+
final String tooltip;
420+
final VoidCallback onTap;
421+
final Color color;
422+
final Color? hoverColor;
423+
const _TitleBarButton({
424+
required this.icon,
425+
required this.tooltip,
426+
required this.onTap,
427+
required this.color,
428+
this.hoverColor,
429+
});
430+
431+
@override
432+
State<_TitleBarButton> createState() => _TitleBarButtonState();
433+
}
434+
435+
class _TitleBarButtonState extends State<_TitleBarButton> {
436+
bool _hovering = false;
437+
@override
438+
Widget build(BuildContext context) {
439+
return MouseRegion(
440+
onEnter: (_) => setState(() => _hovering = true),
441+
onExit: (_) => setState(() => _hovering = false),
442+
child: GestureDetector(
443+
onTap: widget.onTap,
444+
child: Container(
445+
margin: EdgeInsets.symmetric(horizontal: 2),
446+
decoration: BoxDecoration(
447+
color: _hovering
448+
? (widget.hoverColor ?? Theme.of(context).colorScheme.primary.withOpacity(0.08))
449+
: Colors.transparent,
450+
borderRadius: BorderRadius.circular(6),
451+
),
452+
width: 32,
453+
height: 32,
454+
child: Icon(widget.icon, size: 18, color: widget.color),
455+
),
456+
),
457+
);
458+
}
459+
}
460+
380461
class GeneratorPage extends StatefulWidget {
381462
@override
382463
State<GeneratorPage> createState() => _GeneratorPageState();
@@ -492,7 +573,7 @@ class SettingsPage extends StatelessWidget {
492573
var theme = Theme.of(context);
493574
var appState = context.watch<MyAppState>();
494575
return Column(
495-
spacing: 20,
576+
spacing: 5,
496577
children: [
497578
SizedBox(width: 10,),
498579
SettingsCard(
@@ -561,33 +642,82 @@ class SettingsPage extends StatelessWidget {
561642
class AboutPage extends StatelessWidget {
562643
@override
563644
Widget build(BuildContext context) {
564-
// 已经夹私货夹到不知天地为何物了
565-
var theme = Theme.of(context);
566-
var appState = context.watch<MyAppState>();
567-
return Column(
568-
crossAxisAlignment: CrossAxisAlignment.center,
569-
mainAxisAlignment: MainAxisAlignment.center,
570-
spacing: 20,
571-
children: [
572-
SafeArea(child: Image(image: AssetImage('assets/NamePicker.png',),width: 200,height: 200,)),
573-
Center(
574-
child: Text(
575-
sprintf("NamePicker %s - Codename %s",[version,codename]),
576-
textAlign: TextAlign.center,
577-
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC",fontSize: 20,fontWeight: FontWeight.w600),
578-
)
579-
),
580-
Text(
581-
"「云间城邦随岁月离析，昏光庭院再度敞开门扉，为永夜捎来微光」",
582-
textAlign: TextAlign.center,
583-
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC",fontSize: 15,fontWeight: FontWeight.w400),
584-
),
585-
Text(
586-
"开发者 灵魂歌手er",
587-
textAlign: TextAlign.center,
588-
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC",fontSize: 15,fontWeight: FontWeight.w400),
645+
final colorScheme = Theme.of(context).colorScheme;
646+
return Center(
647+
child: SingleChildScrollView(
648+
child: Padding(
649+
padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 32.0),
650+
child: Card(
651+
elevation: 4,
652+
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
653+
color: colorScheme.surfaceContainer,
654+
child: Padding(
655+
padding: const EdgeInsets.all(32.0),
656+
child: Column(
657+
mainAxisSize: MainAxisSize.min,
658+
crossAxisAlignment: CrossAxisAlignment.center,
659+
children: [
660+
ClipRRect(
661+
borderRadius: BorderRadius.circular(16),
662+
child: Image.asset('assets/NamePicker.png', width: 120, height: 120),
663+
),
664+
SizedBox(height: 24),
665+
Row(
666+
mainAxisAlignment: MainAxisAlignment.center,
667+
children: [
668+
Icon(Icons.apps, color: colorScheme.primary, size: 28),
669+
SizedBox(width: 8),
670+
Text(
671+
sprintf("NamePicker %s", [version]),
672+
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC", fontSize: 22, fontWeight: FontWeight.bold, color: colorScheme.onSurface),
673+
),
674+
],
675+
),
676+
SizedBox(height: 8),
677+
Text(
678+
'Codename $codename',
679+
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC", fontSize: 15, color: colorScheme.onSurfaceVariant),
680+
),
681+
SizedBox(height: 16),
682+
Divider(height: 32, thickness: 1, color: colorScheme.outlineVariant),
683+
Padding(
684+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
685+
child: Text(
686+
"「云间城邦随岁月离析，昏光庭院再度敞开门扉，为永夜捎来微光」",
687+
textAlign: TextAlign.center,
688+
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC", fontSize: 16, fontWeight: FontWeight.w400, color: colorScheme.primary),
689+
),
690+
),
691+
SizedBox(height: 24),
692+
Row(
693+
mainAxisAlignment: MainAxisAlignment.center,
694+
children: [
695+
CircleAvatar(
696+
radius: 18,
697+
backgroundColor: colorScheme.primaryContainer,
698+
child: ClipRRect(
699+
borderRadius: BorderRadius.circular(18),
700+
child: Image.asset('assets/avaters/lhgser.jpg', width: 60, height: 60),
701+
),
702+
),
703+
SizedBox(width: 10),
704+
Text(
705+
"开发者 灵魂歌手er",
706+
style: TextStyle(fontFamily: "HarmonyOS_Sans_SC", fontSize: 16, fontWeight: FontWeight.w500, color: colorScheme.onSurface),
707+
),
708+
],
709+
),
710+
SizedBox(height: 12),
711+
Text(
712+
"© 2022-2025 NamePickerOrg",
713+
style: TextStyle(fontSize: 13, color: colorScheme.onSurfaceVariant),
714+
),
715+
],
716+
),
717+
),
718+
),
589719
),
590-
]
720+
),
591721
);
592722
}
593723
}

‎namepicker/lib/settings_card.dart‎

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -24,48 +24,82 @@ class SettingsCard extends StatelessWidget {
2424

2525
@override
2626
Widget build(BuildContext context) {
27+
final colorScheme = Theme.of(context).colorScheme;
2728
return Card(
28-
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
29+
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
2930
elevation: 0,
3031
shape: RoundedRectangleBorder(
31-
borderRadius: BorderRadius.circular(16),
32+
borderRadius: BorderRadius.circular(18),
3233
),
34+
clipBehavior: Clip.antiAlias,
3335
child: InkWell(
34-
borderRadius: BorderRadius.circular(16),
36+
borderRadius: BorderRadius.circular(18),
3537
onTap: onTap,
36-
child: Padding(
37-
padding: padding ?? const EdgeInsets.all(16),
38+
hoverColor: colorScheme.primary.withOpacity(0.06),
39+
splashColor: colorScheme.primary.withOpacity(0.10),
40+
child: Container(
41+
decoration: BoxDecoration(
42+
color: colorScheme.surfaceContainer,
43+
border: Border.all(color: colorScheme.outlineVariant, width: 1),
44+
boxShadow: [
45+
BoxShadow(
46+
color: colorScheme.shadow.withOpacity(0.04),
47+
blurRadius: 8,
48+
offset: Offset(0, 2),
49+
),
50+
],
51+
),
52+
padding: padding ?? const EdgeInsets.symmetric(horizontal: 20, vertical: 18),
3853
child: Row(
54+
crossAxisAlignment: CrossAxisAlignment.center,
3955
children: [
4056
if (leading != null) ...[
41-
leading!,
42-
const SizedBox(width: 16),
57+
Container(
58+
decoration: BoxDecoration(
59+
color: colorScheme.primaryContainer.withOpacity(0.7),
60+
borderRadius: BorderRadius.circular(10),
61+
),
62+
padding: const EdgeInsets.all(8),
63+
child: leading!,
64+
),
65+
const SizedBox(width: 18),
4366
],
4467
Expanded(
4568
child: Column(
4669
crossAxisAlignment: CrossAxisAlignment.start,
4770
children: [
48-
title,
71+
DefaultTextStyle(
72+
style: Theme.of(context).textTheme.titleMedium!.copyWith(fontWeight: FontWeight.w600),
73+
child: title,
74+
),
4975
if (subtitle != null) ...[
50-
const SizedBox(height: 4),
76+
const SizedBox(height: 10),
5177
DefaultTextStyle(
52-
style: Theme.of(context).textTheme.bodySmall!,
78+
style: Theme.of(context).textTheme.bodySmall!.copyWith(color: colorScheme.onSurfaceVariant),
5379
child: subtitle!,
5480
),
5581
],
5682
if (description != null && description!.isNotEmpty) ...[
57-
const SizedBox(height: 6),
83+
const SizedBox(height: 1),
84+
Divider(height: 20, thickness: 1, color: colorScheme.outlineVariant),
5885
Text(
5986
description!,
60-
style: Theme.of(context).textTheme.bodySmall?.copyWith(color: Theme.of(context).colorScheme.onSurfaceVariant),
87+
style: Theme.of(context).textTheme.bodySmall?.copyWith(color: colorScheme.primary, fontWeight: FontWeight.w500),
6188
),
6289
],
6390
],
6491
),
6592
),
6693
if (trailing != null) ...[
67-
const SizedBox(width: 16),
68-
trailing!,
94+
const SizedBox(width: 18),
95+
Container(
96+
// decoration: BoxDecoration(
97+
// color: colorScheme.secondaryContainer.withOpacity(0.7),
98+
// borderRadius: BorderRadius.circular(10),
99+
// ),
100+
padding: const EdgeInsets.all(8),
101+
child: trailing!,
102+
),
69103
],
70104
],
71105
),

‎namepicker/pubspec.yaml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,4 +35,5 @@ flutter:
3535
fonts:
3636
- asset: fonts/HarmonyOS_Sans_SC_Regular.ttf
3737
assets:
38-
- assets/
38+
- assets/
39+
- assets/avaters/

0 commit comments

Comments
 (0)