顶部tab栏优化

This commit is contained in:
DelLevin-Home
2026-06-19 20:02:51 +08:00
parent 5a6bd51864
commit 0af9d4368a
4 changed files with 502 additions and 281 deletions

View File

@@ -88,8 +88,8 @@ lib/
## 数据存储
- **数据**`/mooknote/mooknote.db`
- **图片**`/mooknote/images/<类别>/<条目ID>/<文件名>`
- **数据存储位置**`/mooknote/mooknote.db`
- **图片存储位置**`/mooknote/images/<类别>/<条目ID>/<文件名>`
- 类别:`movie` / `book` / `note`
## 环境要求

View File

@@ -1,3 +1,4 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
@@ -19,6 +20,8 @@ class _TagManagementPageState extends State<TagManagementPage> {
static const _typeIcons = [Icons.movie_outlined, Icons.menu_book_outlined, Icons.note_outlined];
final Map<String, List<Map<String, dynamic>>> _tagCache = {};
Map<String, int> _usageCounts = {};
String? _newlyAddedTagId;
@override
void initState() {
@@ -26,6 +29,35 @@ class _TagManagementPageState extends State<TagManagementPage> {
_loadTags(_tabTypes[0]);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
_updateUsageCounts();
}
void _updateUsageCounts() {
final provider = context.read<AppProvider>();
final counts = <String, int>{};
for (final m in provider.movies.where((m) => !m.isDeleted)) {
for (final g in m.genres) {
counts[g] = (counts[g] ?? 0) + 1;
}
}
for (final b in provider.books.where((b) => !b.isDeleted)) {
for (final g in b.genres) {
counts[g] = (counts[g] ?? 0) + 1;
}
}
for (final n in provider.notes.where((n) => !n.isDeleted)) {
for (final t in n.tags) {
counts[t] = (counts[t] ?? 0) + 1;
}
}
_usageCounts = counts;
}
Future<void> _loadTags(String type) async {
final provider = context.read<AppProvider>();
final tags = await provider.getTags(type);
@@ -40,44 +72,26 @@ class _TagManagementPageState extends State<TagManagementPage> {
if (mounted) {
ToastUtil.show(context, count > 0 ? '已同步 $count 个新标签' : '标签已是最新');
await _loadTags(_currentType);
_updateUsageCounts();
}
} finally {
if (mounted) setState(() => _isSyncing = false);
}
}
void _onTabChanged(int index) {
setState(() => _currentIndex = index);
_loadTags(_tabTypes[index]);
}
String get _currentType => _tabTypes[_currentIndex];
Map<String, int> _getTagUsageCounts(String type) {
final provider = context.read<AppProvider>();
final counts = <String, int>{};
switch (type) {
case 'movie_genre':
for (final m in provider.movies.where((m) => !m.isDeleted)) {
for (final g in m.genres) {
counts[g] = (counts[g] ?? 0) + 1;
}
}
break;
case 'book_genre':
for (final b in provider.books) {
for (final g in b.genres) {
counts[g] = (counts[g] ?? 0) + 1;
}
}
break;
case 'note_tag':
for (final n in provider.notes.where((n) => !n.isDeleted)) {
for (final t in n.tags) {
counts[t] = (counts[t] ?? 0) + 1;
}
}
break;
}
return counts;
int get _activeTagCount {
return (_tagCache[_currentType] ?? []).where((t) => (_usageCounts[t['name']] ?? 0) > 0).length;
}
// ─── build ─────────────────────────────────────────────────────────────
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
@@ -85,6 +99,16 @@ class _TagManagementPageState extends State<TagManagementPage> {
backgroundColor: colors.surfaceContainerHigh,
appBar: AppBar(
title: const Text('标签管理'),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(20),
child: Padding(
padding: const EdgeInsets.only(bottom: 10),
child: Text(
'${(_tagCache[_currentType] ?? []).length} 个标签 · 已使用 $_activeTagCount',
style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.3)),
),
),
),
actions: [
_isSyncing
? Padding(
@@ -104,7 +128,14 @@ class _TagManagementPageState extends State<TagManagementPage> {
const SizedBox(height: 12),
_buildTabSelector(),
const SizedBox(height: 16),
Expanded(child: _buildTagList(_currentType)),
Expanded(
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 200),
switchInCurve: Curves.easeOut,
switchOutCurve: Curves.easeIn,
child: _buildTagList(_currentType),
),
),
],
),
floatingActionButton: GestureDetector(
@@ -132,6 +163,8 @@ class _TagManagementPageState extends State<TagManagementPage> {
);
}
// ─── Tab 选择器 ─────────────────────────────────────────────────────────
Widget _buildTabSelector() {
final colors = Theme.of(context).colorScheme;
return Container(
@@ -149,8 +182,8 @@ class _TagManagementPageState extends State<TagManagementPage> {
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 600),
curve: Curves.elasticOut,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: _currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
@@ -173,16 +206,18 @@ class _TagManagementPageState extends State<TagManagementPage> {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
setState(() => _currentIndex = i);
_loadTags(_tabTypes[i]);
},
child: Container(
height: double.infinity,
alignment: Alignment.center,
child: Text(_typeLabels[i],
style: TextStyle(fontSize: 13, fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
color: selected ? colors.onSurface : colors.onSurface.withValues(alpha: 0.4))),
onTap: () => _onTabChanged(i),
child: AnimatedOpacity(
opacity: selected ? 1.0 : 0.4,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
child: Container(
height: double.infinity,
alignment: Alignment.center,
child: Text(_typeLabels[i],
style: TextStyle(fontSize: 13, fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
color: colors.onSurface)),
),
),
),
);
@@ -196,10 +231,10 @@ class _TagManagementPageState extends State<TagManagementPage> {
);
}
// ─── 标签列表 ──────────────────────────────────────────────────────────
Widget _buildTagList(String type) {
final colors = Theme.of(context).colorScheme;
final tags = _tagCache[type] ?? [];
final usageCounts = _getTagUsageCounts(type);
if (tags.isEmpty) {
return _buildEmptyState(type);
@@ -207,83 +242,72 @@ class _TagManagementPageState extends State<TagManagementPage> {
final sorted = List<Map<String, dynamic>>.from(tags)
..sort((a, b) {
final ca = usageCounts[a['name']] ?? 0;
final cb = usageCounts[b['name']] ?? 0;
final ca = _usageCounts[a['name']] ?? 0;
final cb = _usageCounts[b['name']] ?? 0;
return cb.compareTo(ca);
});
return Padding(
key: ValueKey(type),
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
child: SingleChildScrollView(
padding: const EdgeInsets.only(bottom: 80),
child: Wrap(
spacing: 10,
runSpacing: 10,
children: sorted.map((tag) => _buildTagChip(tag)).toList(),
),
),
);
}
Widget _buildTagChip(Map<String, dynamic> tag) {
final colors = Theme.of(context).colorScheme;
final name = tag['name'] as String;
final count = _usageCounts[name] ?? 0;
final tagId = tag['id'] as String;
final isNew = tagId == _newlyAddedTagId;
return GestureDetector(
key: ValueKey(tagId),
onTap: () => _showTagMenu(tag),
onLongPress: () => _showTagMenu(tag),
child: isNew
? _NewTagHighlight(
child: _tagChipContent(name, count, colors),
)
: _tagChipContent(name, count, colors),
);
}
Widget _tagChipContent(String name, int count, ColorScheme colors) {
return Container(
padding: const EdgeInsets.only(left: 14, right: 10, top: 8, bottom: 8),
decoration: BoxDecoration(
color: colors.surface,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.03), blurRadius: 4, offset: const Offset(0, 2)),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
children: [
Text('${tags.length} 个标签', style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.3))),
const Spacer(),
Text('已使用 ${usageCounts.length}', style: TextStyle(fontSize: 12, color: colors.onSurface.withValues(alpha: 0.2))),
],
Text(name, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onSurface)),
if (count > 0) ...[
const SizedBox(width: 6),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(color: colors.outlineVariant, borderRadius: BorderRadius.circular(8)),
child: Text('$count', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: colors.onSurface.withValues(alpha: 0.4))),
),
),
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.only(bottom: 80),
child: Wrap(
spacing: 10,
runSpacing: 10,
children: sorted.map((tag) => _buildTagChip(tag, usageCounts)).toList(),
),
),
),
],
],
),
);
}
Widget _buildTagChip(Map<String, dynamic> tag, Map<String, int> usageCounts) {
final colors = Theme.of(context).colorScheme;
final name = tag['name'] as String;
final count = usageCounts[name] ?? 0;
return GestureDetector(
onLongPress: () => _showRenameDialog(tag),
child: Container(
padding: const EdgeInsets.only(left: 14, right: 6, top: 8, bottom: 8),
decoration: BoxDecoration(
color: colors.surface,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.03), blurRadius: 4, offset: const Offset(0, 2)),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(name, style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: colors.onSurface)),
if (count > 0) ...[
const SizedBox(width: 6),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(color: colors.outlineVariant, borderRadius: BorderRadius.circular(8)),
child: Text('$count', style: TextStyle(fontSize: 10, fontWeight: FontWeight.w600, color: colors.onSurface.withValues(alpha: 0.4))),
),
],
const SizedBox(width: 4),
GestureDetector(
onTap: () => _showDeleteDialog(tag),
child: Container(
width: 22, height: 22,
decoration: BoxDecoration(color: colors.outlineVariant, borderRadius: BorderRadius.circular(11)),
child: Icon(Icons.close, size: 12, color: colors.onSurface.withValues(alpha: 0.4)),
),
),
],
),
),
);
}
// ─── 新标签高亮动画 ─────────────────────────────────────────────────────
Widget _buildEmptyState(String type) {
final colors = Theme.of(context).colorScheme;
@@ -293,6 +317,7 @@ class _TagManagementPageState extends State<TagManagementPage> {
final hints = ['同步或手动添加影视类型', '同步或手动添加书籍类型', '同步或手动添加笔记标签'];
return Center(
key: ValueKey('empty_$type'),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
@@ -311,6 +336,73 @@ class _TagManagementPageState extends State<TagManagementPage> {
);
}
// ─── 标签操作菜单 ───────────────────────────────────────────────────────
void _showTagMenu(Map<String, dynamic> tag) {
final colors = Theme.of(context).colorScheme;
final name = tag['name'] as String;
showModalBottomSheet(
context: context,
backgroundColor: colors.surface,
shape: const RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
builder: (ctx) {
return SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Center(child: Container(
width: 40, height: 4, margin: const EdgeInsets.only(bottom: 20),
decoration: BoxDecoration(color: colors.onSurface.withValues(alpha: 0.15), borderRadius: BorderRadius.circular(2)),
)),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(12)),
child: Text(name, style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600, color: colors.onSurface)),
),
const SizedBox(height: 16),
_menuAction(Icons.edit_outlined, '重命名', colors, () {
Navigator.pop(ctx);
_showRenameDialog(tag);
}),
_menuAction(Icons.delete_outline, '删除', colors, () {
Navigator.pop(ctx);
_showDeleteDialog(tag);
}, isDestructive: true),
],
),
),
);
},
);
}
Widget _menuAction(IconData icon, String title, ColorScheme colors, VoidCallback onTap, {bool isDestructive = false}) {
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(12),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 14, horizontal: 4),
child: Row(
children: [
Icon(icon, size: 20, color: isDestructive ? const Color(0xFFE53935) : colors.onSurface.withValues(alpha: 0.7)),
const SizedBox(width: 14),
Text(title, style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: isDestructive ? const Color(0xFFE53935) : colors.onSurface,
)),
],
),
),
);
}
// ─── 添加标签 ──────────────────────────────────────────────────────────
void _showAddDialog() {
final colors = Theme.of(context).colorScheme;
final controller = TextEditingController();
@@ -360,18 +452,25 @@ class _TagManagementPageState extends State<TagManagementPage> {
Future<void> _doAddTag(BuildContext ctx, String name, String type) async {
if (name.isEmpty) return;
try {
await context.read<AppProvider>().addTag(name, type);
final provider = context.read<AppProvider>();
final newId = await provider.addTag(name, type);
if (!mounted) return;
if (ctx.mounted) {
Navigator.pop(ctx);
ToastUtil.show(context, '添加成功');
}
setState(() => _newlyAddedTagId = newId);
Timer(const Duration(milliseconds: 1500), () {
if (mounted) setState(() => _newlyAddedTagId = null);
});
await _loadTags(type);
} catch (e) {
if (ctx.mounted) ToastUtil.show(ctx, '添加失败:该标签已存在');
return;
}
if (ctx.mounted) {
Navigator.pop(ctx);
ToastUtil.show(context, '添加成功');
}
await _loadTags(type);
}
// ─── 重命名 ────────────────────────────────────────────────────────────
void _showRenameDialog(Map<String, dynamic> tag) {
final colors = Theme.of(context).colorScheme;
final controller = TextEditingController(text: tag['name'] as String);
@@ -432,13 +531,15 @@ class _TagManagementPageState extends State<TagManagementPage> {
if (success) await _loadTags(type);
}
// ─── 删除标签(简化版:默认仅删除标签,高级选项可展开) ─────────────────────
void _showDeleteDialog(Map<String, dynamic> tag) {
final colors = Theme.of(context).colorScheme;
final tagId = tag['id'] as String;
final type = tag['type'] as String;
final name = tag['name'] as String;
String? selectedAction = 'remove';
final replacementController = TextEditingController();
String? selectedAction = 'deleteOnly';
String? selectedReplacement;
bool showAdvanced = false;
final otherTags = (_tagCache[type] ?? [])
.where((t) => t['id'] != tagId)
@@ -448,112 +549,144 @@ class _TagManagementPageState extends State<TagManagementPage> {
showDialog(
context: context,
builder: (ctx) => StatefulBuilder(
builder: (ctx, setDialogState) => AlertDialog(
backgroundColor: colors.surface,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
title: Row(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(color: colors.surfaceContainerHighest, borderRadius: BorderRadius.circular(12)),
child: Text(name, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: colors.onSurface.withValues(alpha: 0.6))),
),
const SizedBox(width: 10),
Text('删除标签', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: colors.onSurface)),
],
),
titlePadding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
content: SizedBox(
width: double.maxFinite,
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(ctx).size.height * 0.45),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 4),
Text('删除后对已有条目的影响:', style: TextStyle(fontSize: 13, color: colors.onSurface.withValues(alpha: 0.4))),
const SizedBox(height: 12),
_buildDeleteOption(value: 'remove', groupValue: selectedAction, onChanged: (v) => setDialogState(() => selectedAction = v), title: '从所有条目中移除该标签', subtitle: '标签将从影视/书籍/笔记中清除'),
const SizedBox(height: 4),
_buildDeleteOption(value: 'deleteOnly', groupValue: selectedAction, onChanged: (v) => setDialogState(() => selectedAction = v), title: '仅删除标签', subtitle: '保留已有条目上的标签名'),
const SizedBox(height: 4),
_buildDeleteOption(value: 'replace', groupValue: selectedAction, onChanged: (v) => setDialogState(() => selectedAction = v), title: '替换为其他标签'),
if (selectedAction == 'replace')
Padding(
padding: const EdgeInsets.only(left: 40, top: 10),
child: otherTags.isNotEmpty
? Wrap(
spacing: 8, runSpacing: 8,
children: otherTags.map((t) {
final isSelected = replacementController.text == t;
return GestureDetector(
onTap: () {
replacementController.text = isSelected ? '' : t;
setDialogState(() {});
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7),
decoration: BoxDecoration(
color: isSelected ? colors.primary : colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: isSelected ? colors.primary : colors.outlineVariant, width: 0.5),
),
child: Text(t, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.7))),
),
);
}).toList(),
)
: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(color: colors.surfaceContainerHigh, borderRadius: BorderRadius.circular(12)),
child: Text('无其他标签可替换', style: TextStyle(fontSize: 13, color: colors.onSurface.withValues(alpha: 0.35))),
),
),
],
builder: (ctx, setDialogState) {
final bc = Theme.of(ctx).colorScheme;
return AlertDialog(
backgroundColor: bc.surface,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
title: Row(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
decoration: BoxDecoration(color: bc.surfaceContainerHighest, borderRadius: BorderRadius.circular(12)),
child: Text(name, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: bc.onSurface.withValues(alpha: 0.6))),
),
),
const SizedBox(width: 10),
Text('删除标签', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: bc.onSurface)),
],
),
),
contentPadding: const EdgeInsets.fromLTRB(24, 16, 24, 0),
actions: [
TextButton(onPressed: () => Navigator.pop(ctx), child: Text('取消', style: TextStyle(color: colors.onSurface.withValues(alpha: 0.4)))),
Container(
decoration: BoxDecoration(color: const Color(0xFFE53935), borderRadius: BorderRadius.circular(20)),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
String? replacement;
if (selectedAction == 'replace') {
replacement = replacementController.text.trim().isNotEmpty ? replacementController.text.trim() : null;
if (replacement == null) return;
}
Navigator.pop(ctx, {'action': selectedAction, 'replacement': replacement});
},
borderRadius: BorderRadius.circular(20),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Text('删除', style: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.w500)),
titlePadding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
content: SizedBox(
width: double.maxFinite,
child: ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(ctx).size.height * 0.45),
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 4),
// 默认选项
_buildDeleteOption(
value: 'deleteOnly',
groupValue: selectedAction,
onChanged: (v) => setDialogState(() { selectedAction = v; selectedReplacement = null; }),
title: '仅删除标签',
subtitle: '保留已有条目上的标签名,不影响数据',
colors: bc,
),
const SizedBox(height: 8),
// 展开/收起高级选项
GestureDetector(
onTap: () => setDialogState(() => showAdvanced = !showAdvanced),
child: Row(
children: [
Text('更多选项', style: TextStyle(fontSize: 12, fontWeight: FontWeight.w500, color: bc.primary)),
Icon(showAdvanced ? Icons.expand_less : Icons.expand_more, size: 16, color: bc.primary),
],
),
),
if (showAdvanced) ...[
const SizedBox(height: 10),
_buildDeleteOption(
value: 'remove',
groupValue: selectedAction,
onChanged: (v) => setDialogState(() { selectedAction = v; selectedReplacement = null; }),
title: '从所有条目中移除',
subtitle: '彻底清除该标签在所有条目中的记录',
colors: bc,
),
const SizedBox(height: 4),
_buildDeleteOption(
value: 'replace',
groupValue: selectedAction,
onChanged: (v) => setDialogState(() { selectedAction = v; selectedReplacement = null; }),
title: '替换为其他标签',
subtitle: '选择一个已有标签替代',
colors: bc,
),
if (selectedAction == 'replace')
Padding(
padding: const EdgeInsets.only(left: 40, top: 10),
child: otherTags.isNotEmpty
? Wrap(
spacing: 8, runSpacing: 8,
children: otherTags.map((t) {
final isSelected = selectedReplacement == t;
return GestureDetector(
onTap: () => setDialogState(() => selectedReplacement = isSelected ? null : t),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 7),
decoration: BoxDecoration(
color: isSelected ? bc.primary : bc.surfaceContainerHighest,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: isSelected ? bc.primary : bc.outlineVariant, width: 0.5),
),
child: Text(t, style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: isSelected ? bc.onPrimary : bc.onSurface.withValues(alpha: 0.7))),
),
);
}).toList(),
)
: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(color: bc.surfaceContainerHigh, borderRadius: BorderRadius.circular(12)),
child: Text('无其他标签可替换', style: TextStyle(fontSize: 13, color: bc.onSurface.withValues(alpha: 0.35))),
),
),
],
],
),
),
),
),
],
actionsPadding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
),
contentPadding: const EdgeInsets.fromLTRB(24, 16, 24, 0),
actions: [
TextButton(onPressed: () => Navigator.pop(ctx), child: Text('取消', style: TextStyle(color: bc.onSurface.withValues(alpha: 0.4)))),
Container(
decoration: BoxDecoration(color: const Color(0xFFE53935), borderRadius: BorderRadius.circular(20)),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
if (selectedAction == 'replace' && (selectedReplacement == null || selectedReplacement!.isEmpty)) return;
Navigator.pop(ctx, {'action': selectedAction, 'replacement': selectedReplacement});
},
borderRadius: BorderRadius.circular(20),
child: const Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Text('删除', style: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.w500)),
),
),
),
),
],
actionsPadding: const EdgeInsets.fromLTRB(16, 8, 16, 16),
);
},
),
).then((result) async {
if (result == null) return;
final action = result['action'] as String;
final replacement = result['replacement'] as String?;
if (!mounted) return;
final provider = context.read<AppProvider>();
if (action == 'deleteOnly') {
await context.read<AppProvider>().deleteTagOnly(tagId, type);
await provider.deleteTagOnly(tagId, type);
} else {
await context.read<AppProvider>().deleteTag(tagId, type, replacementName: replacement);
await provider.deleteTag(tagId, type, replacementName: replacement);
}
if (mounted) ToastUtil.show(context, '删除成功');
if (!mounted) return;
ToastUtil.show(context, '删除成功');
await _loadTags(type);
});
}
@@ -564,8 +697,8 @@ class _TagManagementPageState extends State<TagManagementPage> {
required ValueChanged<String?> onChanged,
required String title,
String? subtitle,
required ColorScheme colors,
}) {
final colors = Theme.of(context).colorScheme;
final selected = value == groupValue;
return GestureDetector(
onTap: () => onChanged(value),
@@ -598,3 +731,55 @@ class _TagManagementPageState extends State<TagManagementPage> {
);
}
}
// ─── 新标签高亮动画 Widget ─────────────────────────────────────────────────
class _NewTagHighlight extends StatefulWidget {
final Widget child;
const _NewTagHighlight({required this.child});
@override
State<_NewTagHighlight> createState() => _NewTagHighlightState();
}
class _NewTagHighlightState extends State<_NewTagHighlight> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: const Duration(milliseconds: 1500));
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final colors = Theme.of(context).colorScheme;
return AnimatedBuilder(
animation: _controller,
builder: (context, child) {
final opacity = _controller.value < 0.3
? (_controller.value / 0.3).clamp(0.0, 1.0)
: (1.0 - (_controller.value - 0.3) / 0.7).clamp(0.0, 1.0);
final scale = 1.0 + 0.06 * (1.0 - _controller.value);
return Transform.scale(
scale: scale,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: colors.primary.withValues(alpha: 0.12 * opacity),
border: Border.all(color: colors.primary.withValues(alpha: 0.3 * opacity), width: 1),
),
child: widget.child,
),
);
},
);
}
}

View File

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
/// 阅读状态选择栏 - 交叉渐变动画
/// 阅读状态选择栏 - 平滑过渡动画
class BookStatusBar extends StatelessWidget {
const BookStatusBar({super.key});
@@ -11,6 +11,7 @@ class BookStatusBar extends StatelessWidget {
final colors = Theme.of(context).colorScheme;
return Consumer<AppProvider>(
builder: (context, provider, child) {
final currentIndex = provider.bookStatusIndex;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
@@ -23,13 +24,45 @@ class BookStatusBar extends StatelessWidget {
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: SizedBox(
height: 40,
child: Row(children: [
_buildTab(colors, '已读', Icons.check_circle_outline, provider.bookStatusIndex == 0, () => provider.setBookStatusIndex(0)),
_buildTab(colors, '在读', Icons.menu_book_outlined, provider.bookStatusIndex == 1, () => provider.setBookStatusIndex(1)),
_buildTab(colors, '想读', Icons.bookmark_outlined, provider.bookStatusIndex == 2, () => provider.setBookStatusIndex(2)),
]),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 3;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
],
),
),
),
),
Row(
children: [
_buildTab(colors, '已读', Icons.check_circle_outline, currentIndex == 0,
() => provider.setBookStatusIndex(0)),
_buildTab(colors, '在读', Icons.menu_book_outlined, currentIndex == 1,
() => provider.setBookStatusIndex(1)),
_buildTab(colors, '想读', Icons.bookmark_outlined, currentIndex == 2,
() => provider.setBookStatusIndex(2)),
],
),
],
),
);
},
),
),
);
@@ -42,38 +75,23 @@ class BookStatusBar extends StatelessWidget {
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 400),
child: AnimatedOpacity(
opacity: isSelected ? 1.0 : 0.5,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
margin: const EdgeInsets.all(3),
decoration: BoxDecoration(
color: isSelected ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected ? [BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2))] : null,
),
alignment: Alignment.center,
child: AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
),
child: SizedBox.expand(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Icon(icon, key: ValueKey(isSelected), size: 16,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6)),
),
Icon(icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
const SizedBox(width: 6),
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Text(label, key: ValueKey('$label$isSelected')),
),
Text(label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface,
)),
],
),
),

View File

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/app_provider.dart';
/// 观影状态选择栏 - 交叉渐变动画
/// 观影状态选择栏 - 平滑过渡动画
class MovieStatusBar extends StatelessWidget {
const MovieStatusBar({super.key});
@@ -11,6 +11,7 @@ class MovieStatusBar extends StatelessWidget {
final colors = Theme.of(context).colorScheme;
return Consumer<AppProvider>(
builder: (context, provider, child) {
final currentIndex = provider.movieStatusIndex;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
@@ -23,13 +24,45 @@ class MovieStatusBar extends StatelessWidget {
color: colors.surfaceContainerHighest,
borderRadius: BorderRadius.circular(24),
),
child: SizedBox(
height: 40,
child: Row(children: [
_buildTab(colors, '已看', Icons.check_circle_outline, provider.movieStatusIndex == 0, () => provider.setMovieStatusIndex(0)),
_buildTab(colors, '在看', Icons.play_circle_outline, provider.movieStatusIndex == 1, () => provider.setMovieStatusIndex(1)),
_buildTab(colors, '想看', Icons.bookmark_outline, provider.movieStatusIndex == 2, () => provider.setMovieStatusIndex(2)),
]),
child: LayoutBuilder(
builder: (context, constraints) {
final tabWidth = constraints.maxWidth / 3;
return SizedBox(
height: 40,
child: Stack(
children: [
AnimatedPositioned(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
left: currentIndex * tabWidth,
top: 0, bottom: 0, width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: colors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
],
),
),
),
),
Row(
children: [
_buildTab(colors, '已看', Icons.check_circle_outline, currentIndex == 0,
() => provider.setMovieStatusIndex(0)),
_buildTab(colors, '在看', Icons.play_circle_outline, currentIndex == 1,
() => provider.setMovieStatusIndex(1)),
_buildTab(colors, '想看', Icons.bookmark_outline, currentIndex == 2,
() => provider.setMovieStatusIndex(2)),
],
),
],
),
);
},
),
),
);
@@ -42,38 +75,23 @@ class MovieStatusBar extends StatelessWidget {
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 400),
child: AnimatedOpacity(
opacity: isSelected ? 1.0 : 0.5,
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
margin: const EdgeInsets.all(3),
decoration: BoxDecoration(
color: isSelected ? colors.primary : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected ? [BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2))] : null,
),
alignment: Alignment.center,
child: AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 400),
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
),
child: SizedBox.expand(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Icon(icon, key: ValueKey(isSelected), size: 16,
color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6)),
),
Icon(icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
const SizedBox(width: 6),
AnimatedSwitcher(
duration: const Duration(milliseconds: 350),
child: Text(label, key: ValueKey('$label$isSelected')),
),
Text(label,
style: TextStyle(
fontSize: 13,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
color: isSelected ? colors.onPrimary : colors.onSurface,
)),
],
),
),