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 13:39:51 +08:00
parent 231d84fab6
commit 0b28dfffaa
15 changed files with 1426 additions and 888 deletions
Download Patch File Download Diff File Expand all files Collapse all files

428
lib/pages/note/note_tab_page.dart
View File

@@ -1,7 +1,9 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../../providers/app_provider.dart';
import '../../models/data_models.dart';
import '../../utils/user_prefs.dart';
import '../../widgets/note_list_item.dart';
/// 笔记标签页
@@ -13,42 +15,38 @@ class NoteTabPage extends StatefulWidget {
}
class _NoteTabPageState extends State<NoteTabPage> {
// 使用分页加载
static const int _pageSize = 50;
final List<Note> _displayedNotes = [];
bool _isLoading = false;
bool _hasMore = true;
final ScrollController _scrollController = ScrollController();
int _layoutStyle = 0; // 0: 列表, 1: 瀑布流
@override
void initState() {
super.initState();
_scrollController.addListener(_onScroll);
// 延迟加载初始数据，避免阻塞UI
_layoutStyle = UserPrefs().noteLayoutStyle;
WidgetsBinding.instance.addPostFrameCallback((_) {
_loadMoreNotes();
});
}
// 用于检测Provider数据变化
int _lastNotesCount = 0;
@override
void didChangeDependencies() {
super.didChangeDependencies();
// 使用watch监听Provider数据变化
final provider = context.watch<AppProvider>();
final allNotes = provider.notes;
// 如果Provider中的笔记数量发生变化且本地列表已加载过数据
if (allNotes.length != _lastNotesCount && _displayedNotes.isNotEmpty) {
_lastNotesCount = allNotes.length;
// 清空本地列表并重新加载
setState(() {
_displayedNotes.clear();
_hasMore = true;
});
// 延迟加载避免setState冲突
Future.microtask(() => _loadMoreNotes());
} else {
_lastNotesCount = allNotes.length;
@@ -73,14 +71,13 @@ class _NoteTabPageState extends State<NoteTabPage> {
setState(() => _isLoading = true);
// 使用微任务延迟加载，避免阻塞UI
await Future.microtask(() {
final provider = context.read<AppProvider>();
final allNotes = provider.notes;
final startIndex = _displayedNotes.length;
final endIndex = (startIndex + _pageSize).clamp(0, allNotes.length);
if (startIndex >= allNotes.length) {
_hasMore = false;
} else {
@@ -109,75 +106,288 @@ class _NoteTabPageState extends State<NoteTabPage> {
Widget build(BuildContext context) {
return Column(
children: [
// 笔记列表（分页加载）
// 笔记内容
Expanded(
child: _buildNoteList(context),
child: Consumer<AppProvider>(
builder: (context, provider, child) {
final allNotes = provider.notes;
_syncDisplayedNotes(allNotes);
if (allNotes.isEmpty && _displayedNotes.isEmpty) {
return _buildEmptyState(context);
}
if (_layoutStyle == 1) {
return _buildWaterfallView();
}
return _buildListView();
},
),
),
],
);
}
/// 构建笔记列表
Widget _buildNoteList(BuildContext context) {
return Consumer<AppProvider>(
builder: (context, provider, child) {
final allNotes = provider.notes;
// 当Provider数据变化时，同步更新本地显示列表
// 过滤掉已删除的笔记，保持顺序
_syncDisplayedNotes(allNotes);
if (allNotes.isEmpty && _displayedNotes.isEmpty) {
return _buildEmptyState(context);
}
return RefreshIndicator(
onRefresh: _refresh,
color: const Color(0xFF1A1A1A),
backgroundColor: Colors.white,
child: ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.fromLTRB(12, 10, 12, 100),
itemCount: _displayedNotes.length + (_hasMore ? 1 : 0),
itemBuilder: (context, index) {
if (index >= _displayedNotes.length) {
// 底部加载指示器
return const Padding(
padding: EdgeInsets.symmetric(vertical: 16),
child: Center(
child: SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Color(0xFF1A1A1A),
),
),
),
);
}
return NoteListItem(note: _displayedNotes[index]);
},
),
);
},
// ─── 列表视图 ────────────────────────────────────────────────────────
Widget _buildListView() {
return RefreshIndicator(
onRefresh: _refresh,
color: const Color(0xFF1A1A1A),
backgroundColor: Colors.white,
child: ListView.builder(
controller: _scrollController,
padding: const EdgeInsets.fromLTRB(12, 10, 12, 100),
itemCount: _displayedNotes.length + (_hasMore ? 1 : 0),
itemBuilder: (context, index) {
if (index >= _displayedNotes.length) {
return const Padding(
padding: EdgeInsets.symmetric(vertical: 16),
child: Center(
child: SizedBox(
width: 20, height: 20,
child: CircularProgressIndicator(strokeWidth: 2, color: Color(0xFF1A1A1A)),
),
),
);
}
return NoteListItem(note: _displayedNotes[index]);
},
),
);
}
/// 同步显示列表与Provider数据
// ─── 瀑布流视图 ──────────────────────────────────────────────────────
Widget _buildWaterfallView() {
// 分为左右两列
final leftItems = <Note>[];
final rightItems = <Note>[];
for (int i = 0; i < _displayedNotes.length; i++) {
if (i % 2 == 0) {
leftItems.add(_displayedNotes[i]);
} else {
rightItems.add(_displayedNotes[i]);
}
}
return RefreshIndicator(
onRefresh: _refresh,
color: const Color(0xFF1A1A1A),
backgroundColor: Colors.white,
child: SingleChildScrollView(
controller: _scrollController,
padding: const EdgeInsets.fromLTRB(12, 8, 12, 100),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child: Column(children: leftItems.map((n) => _buildWaterfallCard(n)).toList())),
const SizedBox(width: 8),
Expanded(child: Column(children: rightItems.map((n) => _buildWaterfallCard(n)).toList())),
],
),
),
);
}
Widget _buildWaterfallCard(Note note) {
final contentText = _getPreviewText(note);
final images = note.images;
final hasImage = images.isNotEmpty;
final extraCount = images.length - 1;
return GestureDetector(
onTap: () {
Navigator.pushNamed(context, '/note-detail', arguments: note).then((_) async {
await context.read<AppProvider>().loadNotes();
});
},
onLongPress: () => _showDeleteDialog(context, note),
child: Container(
margin: const EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.04),
blurRadius: 6,
offset: const Offset(0, 2),
),
],
),
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
// 顶部图片
if (hasImage)
Stack(
children: [
ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(10)),
child: Image.file(
File(images.first),
width: double.infinity,
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => const SizedBox.shrink(),
),
),
if (extraCount > 0)
Positioned(
top: 6,
right: 6,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.45),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'+$extraCount',
style: const TextStyle(fontSize: 11, color: Colors.white, fontWeight: FontWeight.w600),
),
),
),
],
),
// 底部文字区域
Padding(
padding: const EdgeInsets.fromLTRB(10, 8, 10, 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
if (note.title.isNotEmpty)
Text(
note.title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
height: 1.3,
),
),
if (contentText.isNotEmpty && contentText != '(无内容)') ...[
if (note.title.isNotEmpty) const SizedBox(height: 4),
Text(
contentText,
maxLines: 2,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 11,
color: Color(0xFF999999),
height: 1.4,
),
),
],
const SizedBox(height: 6),
Row(
children: [
Expanded(
child: Text(
_formatTime(note.updatedAt),
style: const TextStyle(fontSize: 10, color: Color(0xFFCCCCCC)),
),
),
if (note.tags.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 1),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(3),
),
child: Text(
note.tags.first,
style: const TextStyle(fontSize: 10, color: Color(0xFF999999)),
),
),
],
),
],
),
),
],
),
),
);
}
String _getPreviewText(Note note) {
final text = note.content
.replaceAll(RegExp(r'#'), '')
.replaceAll(RegExp(r'\*'), '')
.replaceAll(RegExp(r'`'), '')
.replaceAll(RegExp(r'[\[\]\(\)]'), '')
.trim();
return text.isEmpty ? '(无内容)' : text;
}
String _formatTime(DateTime date) {
final now = DateTime.now();
final diff = now.difference(date);
if (diff.inMinutes < 1) return '刚刚';
if (diff.inHours < 1) return '${diff.inMinutes}分钟前';
if (diff.inDays < 1) return '${diff.inHours}小时前';
if (diff.inDays < 7) return '${diff.inDays}天前';
return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}';
}
void _showDeleteDialog(BuildContext context, Note note) {
showDialog(
context: context,
builder: (context) => AlertDialog(
backgroundColor: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
title: const Text('确认删除', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
content: const Text('确定要删除这条笔记吗？删除后可在回收站恢复。',
style: TextStyle(fontSize: 14, color: Color(0xFF666666), height: 1.5)),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
style: TextButton.styleFrom(
foregroundColor: const Color(0xFF666666),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
),
child: const Text('取消'),
),
ElevatedButton(
onPressed: () async {
await context.read<AppProvider>().removeNote(note.id);
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
),
child: const Text('删除'),
),
],
actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
);
}
// ─── 数据同步 ────────────────────────────────────────────────────────
void _syncDisplayedNotes(List<Note> allNotes) {
// 获取当前所有有效笔记的ID集合
final validNoteIds = allNotes.map((n) => n.id).toSet();
// 移除已删除的笔记（不在Provider中的）
final initialLength = _displayedNotes.length;
_displayedNotes.removeWhere((note) => !validNoteIds.contains(note.id));
// 检查是否有新增笔记（Provider中有但本地列表中没有的）
final displayedIds = _displayedNotes.map((n) => n.id).toSet();
final hasNewNotes = allNotes.any((note) => !displayedIds.contains(note.id));
// 检查已存在的笔记是否有更新（通过比较updatedAt）
bool hasUpdates = false;
for (int i = 0; i < _displayedNotes.length; i++) {
final localNote = _displayedNotes[i];
@@ -187,114 +397,46 @@ class _NoteTabPageState extends State<NoteTabPage> {
break;
}
}
// 如果有笔记被移除、有新增、或有更新，更新列表
if (_displayedNotes.length < initialLength || hasNewNotes || hasUpdates) {
// 清空并重新加载所有数据
_displayedNotes.clear();
_displayedNotes.addAll(allNotes);
_hasMore = false; // 已经有全部数据了
_hasMore = false;
}
}
/// 构建空状态提示
// ─── 空状态 ──────────────────────────────────────────────────────────
Widget _buildEmptyState(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 80,
height: 80,
width: 80, height: 80,
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.note_outlined,
size: 40,
color: Color(0xFFCCCCCC),
),
child: const Icon(Icons.note_outlined, size: 40, color: Color(0xFFCCCCCC)),
),
const SizedBox(height: 20),
const Text(
'暂无笔记',
style: TextStyle(
fontSize: 16,
color: Color(0xFF999999),
),
),
const Text('暂无笔记', style: TextStyle(fontSize: 16, color: Color(0xFF999999))),
const SizedBox(height: 24),
InkWell(
onTap: () {
Navigator.pushNamed(context, '/note-form');
},
onTap: () => Navigator.pushNamed(context, '/note-form'),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
decoration: BoxDecoration(
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(8),
),
child: const Text(
'添加记录',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
child: const Text('添加记录',
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: Colors.white)),
),
),
],
),
);
}
/// 获取示例笔记数据
List<Note> _getSampleNotes() {
final now = DateTime.now();
// 示例数据（实际应从数据库获取）
return [
Note(
id: '1',
title: '学习 Flutter 笔记',
content: '今天开始学习 Flutter 框架，感觉和 Vue 有很多相似之处，都是声明式 UI，组件化开发。Widget 的概念很有趣，一切皆 Widget。',
tags: ['学习', 'Flutter', '编程'],
createdAt: now.subtract(const Duration(days: 2)),
updatedAt: now.subtract(const Duration(days: 2)),
),
Note(
id: '2',
title: '《活着》读后感',
content: '余华的《活着》真的是一部让人深思的作品。福贵的一生经历了太多的苦难，但他依然坚强地活着。生命的意义或许就在于活着本身。',
tags: ['阅读', '感悟', '书籍'],
createdAt: now.subtract(const Duration(days: 5)),
updatedAt: now.subtract(const Duration(days: 5)),
),
Note(
id: '3',
title: '诺兰电影观后感',
content: '诺兰的电影总是充满想象力。《星际穿越》将科幻与亲情完美结合，五维空间的呈现方式令人震撼。配乐也是一绝。',
tags: ['观影', '科幻', '电影'],
createdAt: now.subtract(const Duration(days: 10)),
updatedAt: now.subtract(const Duration(days: 10)),
),
Note(
id: '4',
title: 'Pandas 学习笔记',
content: 'Pandas 库的 DataFrame 操作非常强大，可以方便地进行数据清洗和分析。需要多练习熟练掌握常用操作。',
tags: ['Python', '数据分析', '技术'],
createdAt: now.subtract(const Duration(days: 30)),
updatedAt: now.subtract(const Duration(days: 30)),
),
Note(
id: '5',
title: '春日随笔',
content: '春天来了，天气渐暖。周末去公园散步，看到花开得很好。生活中的小确幸值得记录。',
tags: ['生活', '随笔'],
createdAt: now.subtract(const Duration(hours: 5)),
updatedAt: now.subtract(const Duration(hours: 5)),
),
];
}
}