dellevin/MookNote
1
0
Fork 0
generated from dellevin/template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动画效果美化

Browse Source
This commit is contained in:
DelLevin-Home
2026-05-23 17:25:48 +08:00
parent c6ba9da0ab
commit 254ddd8970
17 changed files with 1911 additions and 1073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

396
lib/pages/stroll_page.dart
View File

@@ -4,8 +4,9 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
import '../models/data_models.dart';
import '../widgets/animated_star_rating.dart';
/// 漫步页面 - 随机发现一条内容
/// 漫步页面 - 随机发现内容
class StrollPage extends StatefulWidget {
const StrollPage({super.key});
@@ -13,25 +14,34 @@ class StrollPage extends StatefulWidget {
State<StrollPage> createState() => _StrollPageState();
}
class _StrollPageState extends State<StrollPage> {
class _StrollPageState extends State<StrollPage> with SingleTickerProviderStateMixin {
final _random = Random();
_StrollItem? _currentItem;
late AnimationController _animController;
late Animation<double> _fadeAnim;
bool _isLoading = false;
@override
void initState() {
super.initState();
_refresh();
_animController = AnimationController(vsync: this, duration: const Duration(milliseconds: 500));
_fadeAnim = CurvedAnimation(parent: _animController, curve: Curves.easeIn);
_animController.value = 1.0;
_loadRandom();
}
void _refresh() {
final provider = context.read<AppProvider>();
@override
void dispose() {
_animController.dispose();
super.dispose();
}
// 按类别分组
void _loadRandom() {
final provider = context.read<AppProvider>();
final movies = provider.movies.where((m) => !m.isDeleted).toList();
final books = provider.books.where((b) => !b.isDeleted).toList();
final notes = provider.notes.where((n) => !n.isDeleted).toList();
// 收集非空类别
final categories = <String, List<dynamic>>{};
if (movies.isNotEmpty) categories['movie'] = movies;
if (books.isNotEmpty) categories['book'] = books;
@@ -42,7 +52,6 @@ class _StrollPageState extends State<StrollPage> {
return;
}
// 先等概率选类别，再从该类中随机选一条
final categoryKeys = categories.keys.toList();
final pickedCategory = categoryKeys[_random.nextInt(categoryKeys.length)];
@@ -53,12 +62,14 @@ class _StrollPageState extends State<StrollPage> {
item = _StrollItem(
type: 'movie',
title: m.title,
subtitle: m.alternateTitles.isNotEmpty ? m.alternateTitles.first : '',
detail: _buildMovieDetail(m),
subtitle: m.alternateTitles.take(2).join(' / '),
detail: _movieDetail(m),
imagePath: m.posterPath,
icon: Icons.movie_outlined,
label: '影视',
rating: m.rating,
createdAt: m.createdAt,
color: const Color(0xFF4A90D9),
);
break;
case 'book':
@@ -66,25 +77,28 @@ class _StrollPageState extends State<StrollPage> {
item = _StrollItem(
type: 'book',
title: b.title,
subtitle: b.authors.isNotEmpty ? b.authors.first : '',
detail: _buildBookDetail(b),
subtitle: b.authors.take(2).join(' / '),
detail: _bookDetail(b),
imagePath: b.coverPath,
icon: Icons.menu_book_outlined,
label: '书籍',
rating: b.rating,
createdAt: b.createdAt,
color: const Color(0xFF7E57C2),
);
break;
case 'note':
final n = notes[_random.nextInt(notes.length)];
item = _StrollItem(
type: 'note',
title: n.title.isNotEmpty ? n.title : '无标题',
subtitle: '${n.content.length} 字 · ${n.tags.isNotEmpty ? n.tags.take(2).join(' / ') : '无标签'}',
title: n.title.isNotEmpty ? n.title : '随手记',
subtitle: n.tags.take(3).join(' · '),
detail: n.content,
imagePath: n.images.isNotEmpty ? n.images.first : null,
icon: Icons.note_outlined,
label: '笔记',
createdAt: n.createdAt,
color: const Color(0xFF66BB6A),
);
break;
default:
@@ -95,44 +109,45 @@ class _StrollPageState extends State<StrollPage> {
setState(() => _currentItem = item);
}
String _buildMovieDetail(Movie m) {
void _refresh() async {
setState(() => _isLoading = true);
await _animController.reverse();
_loadRandom();
setState(() => _isLoading = false);
_animController.forward();
}
String _movieDetail(Movie m) {
final parts = <String>[];
if (m.rating != null && m.rating! > 0) parts.add('评分 ${m.rating!.toStringAsFixed(1)}');
if (m.genres.isNotEmpty) parts.add(m.genres.take(3).join(' / '));
if (m.status == 'watched') parts.add('已看');
if (m.status == 'watching') parts.add('在看');
return parts.join(' · ');
if (m.summary != null && m.summary!.isNotEmpty) parts.add(m.summary!.length > 80 ? '${m.summary!.substring(0, 80)}...' : m.summary!);
return parts.join('\n');
}
String _buildBookDetail(Book b) {
String _bookDetail(Book b) {
final parts = <String>[];
if (b.rating != null && b.rating! > 0) parts.add('评分 ${b.rating!.toStringAsFixed(1)}');
if (b.genres.isNotEmpty) parts.add(b.genres.take(3).join(' / '));
if (b.publisher != null && b.publisher!.isNotEmpty) parts.add(b.publisher!);
if (b.status == 'read') parts.add('已读');
if (b.status == 'reading') parts.add('在读');
return parts.join(' · ');
if (b.summary != null && b.summary!.isNotEmpty) parts.add(b.summary!.length > 80 ? '${b.summary!.substring(0, 80)}...' : b.summary!);
return parts.join('\n');
}
String _getTimeAgoText(DateTime date) {
String _timeAgoText(DateTime date) {
final diff = DateTime.now().difference(date);
if (diff.inDays >= 365) return '1年前';
if (diff.inDays >= 180) return '6个月前';
if (diff.inDays >= 90) return '3个月前';
if (diff.inDays >= 30) return '1个月前';
return '${diff.inDays}天前';
if (diff.inDays >= 365) return '${(diff.inDays / 365).floor()}年前';
if (diff.inDays >= 30) return '${(diff.inDays / 30).floor()}个月前';
if (diff.inDays > 0) return '${diff.inDays}天前';
if (diff.inHours > 0) return '${diff.inHours}小时前';
return '刚刚';
}
String _getActionTimeAgo(_StrollItem item) {
final timeAgo = _getTimeAgoText(item.createdAt);
String _actionText(_StrollItem item) {
final ago = _timeAgoText(item.createdAt);
switch (item.type) {
case 'movie':
return '${timeAgo}看过';
case 'book':
return '${timeAgo}读过';
case 'note':
return '${timeAgo}写下';
default:
return timeAgo;
case 'movie': return '$ago 看过';
case 'book': return '$ago 读过';
case 'note': return '$ago 写下';
default: return ago;
}
}
@@ -146,23 +161,20 @@ class _StrollPageState extends State<StrollPage> {
Padding(
padding: const EdgeInsets.only(right: 12),
child: GestureDetector(
onTap: _refresh,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 6),
onTap: _isLoading ? null : _refresh,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(18),
),
child: Row(
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.refresh, size: 14, color: Color(0xFF666666)),
const SizedBox(width: 4),
const Text(
'换一个',
style: TextStyle(fontSize: 12, color: Color(0xFF666666)),
),
Icon(Icons.casino_outlined, size: 14, color: Colors.white),
SizedBox(width: 5),
Text('随机', style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w500)),
],
),
),
@@ -171,211 +183,163 @@ class _StrollPageState extends State<StrollPage> {
],
),
body: _currentItem == null
? const Center(
child: Text(
'还没有任何内容\n去添加一些吧',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 15, color: Color(0xFFBBBBBB), height: 1.6),
),
)
: Consumer<AppProvider>(
builder: (context, provider, _) {
final item = _currentItem!;
? const Center(child: Text('还没有任何内容\n去添加一些吧', textAlign: TextAlign.center,
style: TextStyle(fontSize: 15, color: Color(0xFFBBBBBB), height: 1.6)))
: Consumer<AppProvider>(builder: (context, provider, _) {
final item = _currentItem!;
final hasImage = item.imagePath != null && item.imagePath!.isNotEmpty && File(item.imagePath!).existsSync();
// 笔记：独立卡片样式
if (item.type == 'note') {
return _buildNoteCard(item);
}
// 影视/书籍：海报+信息样式
final hasImage = item.imagePath != null &&
item.imagePath!.isNotEmpty &&
File(item.imagePath!).existsSync();
return Center(
return FadeTransition(
opacity: _fadeAnim,
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(32),
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 类型标签
_buildTypeChip(item),
_buildTypeBadge(item),
const SizedBox(height: 24),
const SizedBox(height: 28),
// 海报/封面/图标
if (hasImage)
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Image.file(
File(item.imagePath!),
width: 200,
height: 260,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => _buildPlaceholder(item),
),
)
// 封面/图片
if (item.type != 'note')
_buildCoverCard(item, hasImage)
else
_buildPlaceholder(item),
_buildNoteCard(item, hasImage),
const SizedBox(height: 28),
const SizedBox(height: 24),
// 标题
Text(
item.title,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
color: Color(0xFF1A1A1A),
height: 1.3,
// 标题（笔记卡片已包含标题和内容，不需要重复）
if (item.type != 'note') ...[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
item.title,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: Color(0xFF1A1A1A), height: 1.3),
),
),
),
// 副标题
if (item.subtitle.isNotEmpty) ...[
const SizedBox(height: 8),
Text(
item.subtitle,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 14, color: Color(0xFF999999)),
),
],
if (item.subtitle.isNotEmpty) ...[
const SizedBox(height: 8),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Text(item.subtitle, textAlign: TextAlign.center,
style: const TextStyle(fontSize: 13, color: Color(0xFF999999))),
),
],
// 详情
if (item.detail.isNotEmpty) ...[
const SizedBox(height: 6),
Text(
item.detail,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 13, color: Color(0xFFAAAAAA)),
),
// 评分
if (item.rating != null) ...[
const SizedBox(height: 10),
AnimatedStarRating(rating: item.rating!, starSize: 16, showNumber: true),
],
// 详情
if (item.detail.isNotEmpty) ...[
const SizedBox(height: 14),
Container(
margin: const EdgeInsets.symmetric(horizontal: 4),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(12),
),
child: Text(item.detail,
style: const TextStyle(fontSize: 13, color: Color(0xFF777777), height: 1.7)),
),
],
],
// 时间
const SizedBox(height: 10),
Text(
_getActionTimeAgo(item),
style: const TextStyle(fontSize: 12, color: Color(0xFFCCCCCC)),
),
const SizedBox(height: 12),
Text(_actionText(item), style: const TextStyle(fontSize: 12, color: Color(0xFFCCCCCC))),
const SizedBox(height: 40),
],
),
),
);
},
),
),
);
}),
);
}
Widget _buildTypeChip(_StrollItem item) {
Widget _buildTypeBadge(_StrollItem item) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 5),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(16),
color: item.color.withValues(alpha: 0.08),
borderRadius: BorderRadius.circular(14),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(item.icon, size: 14, color: const Color(0xFF999999)),
const SizedBox(width: 6),
Text(item.label, style: const TextStyle(fontSize: 12, color: Color(0xFF888888))),
Icon(item.icon, size: 14, color: item.color),
const SizedBox(width: 5),
Text(item.label, style: TextStyle(fontSize: 12, fontWeight: FontWeight.w600, color: item.color)),
],
),
);
}
/// 笔记卡片样式
Widget _buildNoteCard(_StrollItem item) {
return Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildTypeChip(item),
const SizedBox(height: 24),
Widget _buildCoverCard(_StrollItem item, bool hasImage) {
return Container(
width: 220,
height: 290,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(color: item.color.withValues(alpha: 0.15), blurRadius: 20, offset: const Offset(0, 8)),
],
),
clipBehavior: Clip.antiAlias,
child: hasImage
? Image.file(File(item.imagePath!), fit: BoxFit.cover,
errorBuilder: (_, __, ___) => _buildPlaceholder(item))
: _buildPlaceholder(item),
);
}
// 笔记卡片 - 类似分享海报
Container(
width: double.infinity,
constraints: const BoxConstraints(maxWidth: 340),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.08),
blurRadius: 20,
offset: const Offset(0, 8),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 内容
Padding(
padding: const EdgeInsets.all(24),
child: Text(
item.detail,
style: const TextStyle(
fontSize: 15,
color: Color(0xFF333333),
height: 1.8,
),
),
),
// 底部分隔
Container(height: 0.5, color: const Color(0xFFEEEEEE)),
Padding(
padding: const EdgeInsets.all(16),
child: Row(
children: [
const Icon(Icons.note_outlined, size: 13, color: Color(0xFFCCCCCC)),
const SizedBox(width: 6),
Text(
'${item.detail.length} 字',
style: const TextStyle(fontSize: 11, color: Color(0xFFBBBBBB)),
),
const SizedBox(width: 10),
Text(
_getActionTimeAgo(item),
style: const TextStyle(fontSize: 11, color: Color(0xFFBBBBBB)),
),
const Spacer(),
const Text(
'Mooknote',
style: TextStyle(fontSize: 11, color: Color(0xFFDDDDDD)),
),
],
),
),
],
),
),
const SizedBox(height: 32),
],
),
Widget _buildNoteCard(_StrollItem item, bool hasImage) {
return Container(
width: double.infinity,
constraints: const BoxConstraints(maxWidth: 360),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.06), blurRadius: 16, offset: const Offset(0, 6)),
],
),
clipBehavior: Clip.antiAlias,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
if (hasImage)
Image.file(File(item.imagePath!), fit: BoxFit.cover, height: 200, width: double.infinity,
errorBuilder: (_, __, ___) => const SizedBox.shrink()),
Padding(
padding: const EdgeInsets.all(20),
child: Text(item.detail.isEmpty ? '(无内容)' : item.detail,
style: const TextStyle(fontSize: 14, color: Color(0xFF444444), height: 1.8)),
),
const Divider(height: 1, color: Color(0xFFF0F0F0)),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
child: Text('${item.detail.length} 字 · Mooknote', style: const TextStyle(fontSize: 11, color: Color(0xFFBBBBBB))),
),
],
),
);
}
Widget _buildPlaceholder(_StrollItem item) {
return Container(
width: 120,
height: 160,
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: const Color(0xFFEEEEEE), width: 0.5),
color: const Color(0xFFF8F8F8),
child: Center(
child: Icon(item.icon, size: 48, color: item.color.withValues(alpha: 0.2)),
),
child: Icon(item.icon, size: 40, color: const Color(0xFFDDDDDD)),
);
}
}
@@ -388,7 +352,9 @@ class _StrollItem {
final String? imagePath;
final IconData icon;
final String label;
final double? rating;
final DateTime createdAt;
final Color color;
_StrollItem({
required this.type,
@@ -398,6 +364,8 @@ class _StrollItem {
this.imagePath,
required this.icon,
required this.label,
this.rating,
required this.createdAt,
required this.color,
});
}