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-22 12:15:43 +08:00
parent 8f51a06c56
commit 6b5488aff8
13 changed files with 1446 additions and 1538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

554
lib/pages/note/note_detail_page.dart
View File

@@ -4,9 +4,9 @@ import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import 'package:provider/provider.dart';
import '../../providers/app_provider.dart';
import '../../models/data_models.dart';
import '../../utils/toast_util.dart';
import 'note_share_page.dart';
/// 笔记详情页 - 极简主义设计
/// 笔记详情页
class NoteDetailPage extends StatefulWidget {
final Note note;
@@ -17,275 +17,241 @@ class NoteDetailPage extends StatefulWidget {
}
class _NoteDetailPageState extends State<NoteDetailPage> {
static const _weekdays = ['一', '二', '三', '四', '五', '六', '日'];
@override
Widget build(BuildContext context) {
// 从 Provider 获取最新的笔记数据
final note = context.watch<AppProvider>().notes.firstWhere(
(n) => n.id == widget.note.id,
orElse: () => widget.note,
);
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(
note.title.isNotEmpty ? note.title : '无标题',
note.title.isNotEmpty
? note.title
: _truncateContent(note.content),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
actions: [
IconButton(
icon: const Icon(Icons.edit_outlined),
onPressed: () => _navigateToEdit(context),
),
const SizedBox(width: 8),
],
),
body: Column(
body: Stack(
children: [
// 标签区域
if (note.tags.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
Column(
children: [
// 日期 + 字数
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
),
child: Row(
children: [
Text(
'${note.createdAt.day}',
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.w200,
color: Color(0xFF333333),
height: 1.0,
),
),
const SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'${note.createdAt.year}/${note.createdAt.month.toString().padLeft(2, '0')} 周${_weekdays[note.createdAt.weekday - 1]}',
style: const TextStyle(fontSize: 11, fontWeight: FontWeight.w500, color: Color(0xFF777777)),
),
const SizedBox(height: 1),
Text(
'${note.createdAt.hour.toString().padLeft(2, '0')}:${note.createdAt.minute.toString().padLeft(2, '0')}',
style: const TextStyle(fontSize: 11, color: Color(0xFF999999)),
),
],
),
const Spacer(),
Text(
'${note.content.length} 字',
style: const TextStyle(fontSize: 11, color: Color(0xFFAAAAAA)),
),
],
),
),
child: Row(
children: [
Wrap(
spacing: 10,
runSpacing: 10,
children: note.tags.map((tag) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Text(
tag,
style: const TextStyle(
fontSize: 13,
color: Color(0xFF666666),
),
),
);
}).toList(),
),
],
),
),
// 内容区域 - Markdown 渲染
Expanded(
child: _buildMarkdownContent(note),
// 标签行
if (note.tags.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 6),
child: _buildTagRow(note.tags),
),
// 内容
Expanded(
child: Markdown(
data: note.content,
styleSheet: _buildMarkdownStyleSheet(),
padding: const EdgeInsets.all(16),
// ignore: deprecated_member_use
imageBuilder: (uri, title, alt) => _buildMarkdownImage(uri, note),
),
),
// 图片行
if (note.images.isNotEmpty) _buildImageRow(note.images),
],
),
// 右下角悬浮按钮组
Positioned(
right: 16,
bottom: 24,
child: _buildFloatingActionButtons(),
),
],
),
);
}
/// 构建 Markdown 内容
Widget _buildMarkdownContent(Note note) {
return Markdown(
data: note.content,
styleSheet: _buildMarkdownStyleSheet(),
padding: const EdgeInsets.all(16),
// TODO: migrate to sizedImageBuilder when flutter_markdown is updated
// ignore: deprecated_member_use
imageBuilder: (uri, title, alt) => _buildMarkdownImage(uri),
Widget _buildTagRow(List<String> tags) {
return Container(
height: 28,
margin: const EdgeInsets.only(bottom: 2),
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: tags.length,
separatorBuilder: (_, __) => const SizedBox(width: 6),
itemBuilder: (context, index) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(6),
),
child: Text(
tags[index],
style: const TextStyle(fontSize: 11, color: Color(0xFF666666)),
),
);
},
),
);
}
Widget _buildImageRow(List<String> images) {
return Container(
height: 80,
decoration: BoxDecoration(
color: Colors.white,
border: const Border(
top: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 6,
offset: const Offset(0, -2),
),
],
),
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
itemCount: images.length,
separatorBuilder: (_, __) => const SizedBox(width: 8),
itemBuilder: (context, index) {
return InkWell(
onTap: () => _showImagePreview(images, index),
child: Container(
width: 64,
height: 64,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
clipBehavior: Clip.antiAlias,
child: Image.file(
File(images[index]),
fit: BoxFit.cover,
errorBuilder: (_, __, ___) => Container(
color: const Color(0xFFF5F5F5),
child: const Icon(Icons.broken_image_outlined, size: 20, color: Color(0xFFCCCCCC)),
),
),
),
);
},
),
);
}
/// 构建 Markdown 样式表
MarkdownStyleSheet _buildMarkdownStyleSheet() {
return MarkdownStyleSheet(
h1: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
height: 1.4,
),
h2: const TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
height: 1.4,
),
h3: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
height: 1.4,
),
h4: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
height: 1.4,
),
p: const TextStyle(
fontSize: 15,
color: Color(0xFF333333),
height: 1.8,
),
code: const TextStyle(
fontSize: 14,
color: Color(0xFF1A1A1A),
backgroundColor: Color(0xFFF5F5F5),
fontFamily: 'monospace',
),
h1: const TextStyle(fontSize: 24, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A), height: 1.4),
h2: const TextStyle(fontSize: 20, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A), height: 1.4),
h3: const TextStyle(fontSize: 18, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A), height: 1.4),
h4: const TextStyle(fontSize: 16, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A), height: 1.4),
p: const TextStyle(fontSize: 15, color: Color(0xFF333333), height: 1.8),
code: const TextStyle(fontSize: 14, color: Color(0xFF1A1A1A), backgroundColor: Color(0xFFF5F5F5), fontFamily: 'monospace'),
codeblockDecoration: BoxDecoration(
color: const Color(0xFFF8F8F8),
border: Border.all(color: const Color(0xFFE5E5E5)),
borderRadius: BorderRadius.circular(6),
),
codeblockPadding: const EdgeInsets.all(12),
blockquote: const TextStyle(
fontSize: 15,
color: Color(0xFF666666),
fontStyle: FontStyle.italic,
height: 1.8,
),
blockquote: const TextStyle(fontSize: 15, color: Color(0xFF666666), fontStyle: FontStyle.italic, height: 1.8),
blockquoteDecoration: const BoxDecoration(
border: Border(left: BorderSide(color: Color(0xFF999999), width: 4)),
),
blockquotePadding: const EdgeInsets.only(left: 12, top: 4, bottom: 4),
listBullet: const TextStyle(
fontSize: 15,
color: Color(0xFF1A1A1A),
),
listBullet: const TextStyle(fontSize: 15, color: Color(0xFF1A1A1A)),
listIndent: 24,
a: const TextStyle(
fontSize: 15,
color: Color(0xFF4A90D9),
decoration: TextDecoration.underline,
),
tableHead: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
tableBody: const TextStyle(
fontSize: 14,
color: Color(0xFF333333),
),
tableBorder: TableBorder.all(
color: const Color(0xFFE5E5E5),
width: 0.5,
),
a: const TextStyle(fontSize: 15, color: Color(0xFF4A90D9), decoration: TextDecoration.underline),
tableHead: const TextStyle(fontSize: 14, fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A)),
tableBody: const TextStyle(fontSize: 14, color: Color(0xFF333333)),
tableBorder: TableBorder.all(color: const Color(0xFFE5E5E5), width: 0.5),
tableColumnWidth: const FlexColumnWidth(),
tableCellsDecoration: const BoxDecoration(
color: Colors.white,
),
tableCellsDecoration: const BoxDecoration(color: Colors.white),
tablePadding: const EdgeInsets.all(8),
strong: const TextStyle(
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
em: const TextStyle(
fontStyle: FontStyle.italic,
color: Color(0xFF333333),
),
del: const TextStyle(
decoration: TextDecoration.lineThrough,
color: Color(0xFF999999),
),
strong: const TextStyle(fontWeight: FontWeight.w600, color: Color(0xFF1A1A1A)),
em: const TextStyle(fontStyle: FontStyle.italic, color: Color(0xFF333333)),
del: const TextStyle(decoration: TextDecoration.lineThrough, color: Color(0xFF999999)),
);
}
/// 构建 Markdown 中的图片
Widget _buildMarkdownImage(Uri uri) {
// 检查是否是本地图片路径
Widget _buildMarkdownImage(Uri uri, Note note) {
final path = uri.toString();
if (path.isEmpty) return const SizedBox.shrink();
// 尝试从笔记图片列表中查找
final noteImages = widget.note.images;
String? matchedPath;
for (final imgPath in noteImages) {
for (final imgPath in note.images) {
if (imgPath.contains(path) || path.contains(imgPath)) {
matchedPath = imgPath;
break;
if (File(imgPath).existsSync()) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.file(File(imgPath), fit: BoxFit.cover),
);
}
}
}
if (matchedPath != null && File(matchedPath).existsSync()) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.file(
File(matchedPath),
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return _buildImageErrorWidget();
},
),
);
}
// 如果是网络图片
if (path.startsWith('http')) {
return ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
path,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return _buildImageErrorWidget();
},
),
child: Image.network(path, fit: BoxFit.cover, errorBuilder: (_, __, ___) => const SizedBox.shrink()),
);
}
return _buildImageErrorWidget();
return const SizedBox.shrink();
}
/// 构建图片错误状态
Widget _buildImageErrorWidget() {
return Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
const Icon(Icons.broken_image_outlined, size: 20, color: Color(0xFF999999)),
const SizedBox(width: 8),
const Expanded(
child: Text(
'图片加载失败',
style: TextStyle(fontSize: 13, color: Color(0xFF999999)),
),
),
],
),
);
}
/// 格式化日期时间
String _formatDateTime(DateTime dateTime) {
return '${dateTime.year}-${dateTime.month.toString().padLeft(2, '0')}-${dateTime.day.toString().padLeft(2, '0')} ${dateTime.hour.toString().padLeft(2, '0')}:${dateTime.minute.toString().padLeft(2, '0')}';
}
/// 跳转到编辑页面
void _navigateToEdit(BuildContext context) {
// 从 Provider 获取最新的笔记数据，确保图片等字段是最新的
final currentNote = context.read<AppProvider>().notes.firstWhere(
(n) => n.id == widget.note.id,
orElse: () => widget.note,
);
Navigator.pushNamed(context, '/note-form', arguments: currentNote).then((_) async {
// 返回时刷新笔记列表
await context.read<AppProvider>().loadNotes();
});
}
/// 显示图片预览
void _showImagePreview(BuildContext context, List<String> images, int initialIndex) {
void _showImagePreview(List<String> images, int initialIndex) {
showDialog(
context: context,
barrierDismissible: true,
@@ -299,10 +265,7 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
boundaryMargin: const EdgeInsets.all(20),
minScale: 0.5,
maxScale: 4,
child: Image.file(
File(images[initialIndex]),
fit: BoxFit.contain,
),
child: Image.file(File(images[initialIndex]), fit: BoxFit.contain),
),
),
),
@@ -310,91 +273,120 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
);
}
/// 构建操作按钮
Widget _buildActionButton({
/// 截取内容前N个字作为标题
String _truncateContent(String content) {
final cleaned = content
.replaceAll(RegExp(r'^#+\s+', multiLine: true), '')
.replaceAll(RegExp(r'\*\*(.+?)\*\*'), r'$1')
.replaceAll(RegExp(r'\*(.+?)\*'), r'$1')
.replaceAll(RegExp(r'`(.+?)`'), r'$1')
.replaceAll(RegExp(r'^\s*[-*+]\s', multiLine: true), '')
.replaceAll(RegExp(r'^\s*>\s', multiLine: true), '')
.replaceAll(RegExp(r'\[([^\]]+)\]\([^)]+\)'), r'$1')
.replaceAll(RegExp(r'!\[([^\]]*)\]\([^)]+\)'), '')
.trim();
if (cleaned.isEmpty) return '无标题';
return cleaned.length > 20 ? '${cleaned.substring(0, 20)}…' : cleaned;
}
void _navigateToEdit(BuildContext context) {
final currentNote = context.read<AppProvider>().notes.firstWhere(
(n) => n.id == widget.note.id,
orElse: () => widget.note,
);
Navigator.pushNamed(context, '/note-form', arguments: currentNote).then((_) async {
await context.read<AppProvider>().loadNotes();
});
}
/// 右下角悬浮按钮组
Widget _buildFloatingActionButtons() {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildFloatingButton(
icon: Icons.edit_outlined,
onPressed: () => _navigateToEdit(context),
tooltip: '编辑',
),
const SizedBox(height: 12),
_buildFloatingButton(
icon: Icons.delete_outline,
onPressed: () => _showDeleteDialog(context),
tooltip: '删除',
backgroundColor: Colors.red,
),
const SizedBox(height: 12),
_buildFloatingButton(
icon: Icons.share_outlined,
onPressed: _shareNote,
tooltip: '分享',
backgroundColor: const Color(0xFF4CAF50),
),
],
);
}
Widget _buildFloatingButton({
required IconData icon,
required Color color,
required VoidCallback onTap,
required VoidCallback onPressed,
required String tooltip,
Color backgroundColor = const Color(0xFF1A1A1A),
}) {
return Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(10),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(10),
child: Icon(
icon,
color: color,
size: 20,
),
return Material(
color: Colors.transparent,
child: Ink(
width: 40,
height: 40,
decoration: BoxDecoration(
color: backgroundColor,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: backgroundColor.withValues(alpha: 0.3),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
child: IconButton(
icon: Icon(icon, size: 18, color: Colors.white),
onPressed: onPressed,
padding: EdgeInsets.zero,
tooltip: tooltip,
),
),
);
}
/// 显示删除对话框
void _showDeleteDialog(BuildContext context) {
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,
),
),
builder: (ctx) => AlertDialog(
title: const Text('删除笔记'),
content: const Text('删除后将移至回收站，确定要删除吗？'),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
style: TextButton.styleFrom(
foregroundColor: const Color(0xFF666666),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
),
onPressed: () => Navigator.pop(ctx),
child: const Text('取消'),
),
ElevatedButton(
onPressed: () async {
await context.read<AppProvider>().removeNote(widget.note.id);
// 刷新笔记列表
await context.read<AppProvider>().loadNotes();
if (!mounted) return;
TextButton(
onPressed: () {
Navigator.pop(ctx);
context.read<AppProvider>().removeNote(widget.note.id);
Navigator.pop(context);
Navigator.pop(context);
ToastUtil.show(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('删除'),
child: const Text('删除', style: TextStyle(color: Colors.red)),
),
],
actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
);
}
void _shareNote() {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => NoteSharePage(note: widget.note)),
);
}
}

817
lib/pages/note/note_form_page.dart
View File

@@ -20,124 +20,165 @@ class NoteFormPage extends StatefulWidget {
}
class _NoteFormPageState extends State<NoteFormPage> {
late TextEditingController _titleController;
late TextEditingController _contentController;
late DateTime _createdAt;
List<String> _tags = [];
List<String> _images = []; // 图片路径列表
String _contentType = 'plain_text'; // markdown / plain_text
bool _isEditing = false;
final ImagePicker _picker = ImagePicker();
String? _tempNoteId; // 新建模式时使用的临时笔记ID
String _editorMode = 'split'; // 'edit' | 'split' | 'preview'
String _editorMode = 'edit'; // 'edit' | 'preview'
int _charCount = 0;
static const _weekdays = ['一', '二', '三', '四', '五', '六', '日'];
@override
void initState() {
super.initState();
final note = widget.note;
_contentController = TextEditingController(text: note?.content ?? '');
_titleController = TextEditingController(text: note?.title ?? '');
final text = note?.content ?? '';
_contentController = TextEditingController(text: text);
_charCount = text.length;
_contentController.addListener(() {
setState(() => _charCount = _contentController.text.length);
});
_createdAt = note?.createdAt ?? DateTime.now();
_tags = note != null ? List.from(note.tags) : [];
_images = note != null ? List.from(note.images) : [];
_contentType = note?.contentType ?? 'plain_text';
_isEditing = note != null;
}
@override
void dispose() {
_titleController.dispose();
_contentController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final bottomInset = MediaQuery.of(context).viewInsets.bottom;
return Scaffold(
backgroundColor: Colors.white,
resizeToAvoidBottomInset: false,
appBar: AppBar(
title: Text(_isEditing ? '编辑笔记' : '新建笔记'),
title: GestureDetector(
onLongPress: _showTitleDialog,
child: _buildAppBarTitle(),
),
actions: [
IconButton(
onPressed: _saveNote,
icon: const Icon(Icons.save_outlined),
tooltip: '保存',
Padding(
padding: const EdgeInsets.only(right: 12),
child: TextButton(
onPressed: _saveNote,
style: TextButton.styleFrom(
backgroundColor: const Color(0xFF1A1A1A),
foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
minimumSize: Size.zero,
),
child: const Text('保存', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500)),
),
),
const SizedBox(width: 8),
],
),
body: Column(
body: Stack(
children: [
// 顶部信息栏：创建时间 + 格式选择 + 标签
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
),
// 主内容区域 — 图片网格固定在内容下方
Padding(
padding: EdgeInsets.only(bottom: 56 + bottomInset),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
// 创建时间
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Text(
_formatDateTime(_createdAt),
style: const TextStyle(
fontSize: 12,
color: Color(0xFF666666),
),
),
// 顶部信息栏
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
decoration: const BoxDecoration(
border: Border(
bottom: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
const Spacer(),
// 格式选择
_buildFormatSelector(),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 大日号
Text(
'${_createdAt.day}',
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.w200,
color: Color(0xFF333333),
height: 1.0,
),
),
const SizedBox(width: 8),
// 右边：年月 + 时分 纵向排列
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'${_createdAt.year}/${_createdAt.month.toString().padLeft(2, '0')} 周${_weekdays[_createdAt.weekday - 1]}',
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w500,
color: Color(0xFF777777),
),
),
const SizedBox(height: 1),
Text(
'${_createdAt.hour.toString().padLeft(2, '0')}:${_createdAt.minute.toString().padLeft(2, '0')}',
style: const TextStyle(
fontSize: 11,
color: Color(0xFF999999),
),
),
],
),
const Spacer(),
// 字数统计
Text(
'$_charCount 字',
style: const TextStyle(
fontSize: 11,
color: Color(0xFFAAAAAA),
),
),
],
),
],
),
),
const SizedBox(height: 12),
// 标签
_buildTagSelector(),
// 标签行
_buildTagRow(),
// 编辑 / 预览区域
Expanded(
child: _buildContentArea(),
),
// 图片区域
_buildImageRow(),
],
),
),
// 编辑 / 预览区域
Expanded(
child: _contentType == 'markdown'
? _buildContentArea()
: _buildEditor(),
// 底部浮动工具栏 — 独立于主内容，键盘弹起时单独上移
Positioned(
left: 0,
right: 0,
bottom: bottomInset,
child: _buildFloatingToolbar(),
),
// 图片区域（放在内容下方）
if (_contentType == 'plain_text' && _images.isNotEmpty)
Container(
height: 100,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: const BoxDecoration(
border: Border(
top: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
),
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _images.length,
separatorBuilder: (context, index) => const SizedBox(width: 8),
itemBuilder: (context, index) {
return _buildHorizontalImageItem(index);
},
),
),
// 底部区域：Markdown 浮动工具栏 或 纯文本图片工具栏
if (_contentType == 'markdown')
_buildFloatingToolbar()
else
_buildPlainTextBottom(),
],
),
);
@@ -216,7 +257,6 @@ class _NoteFormPageState extends State<NoteFormPage> {
),
const SizedBox(width: 8),
_modeSwitch(Icons.edit, 'edit'),
_modeSwitch(Icons.vertical_split, 'split'),
_modeSwitch(Icons.visibility, 'preview'),
],
),
@@ -323,91 +363,14 @@ class _NoteFormPageState extends State<NoteFormPage> {
}
}
/// 纯文本模式底部栏
Widget _buildPlainTextBottom() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
decoration: const BoxDecoration(
border: Border(
top: BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
),
child: Row(
children: [
if (_images.isNotEmpty)
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.image_outlined, size: 14, color: Color(0xFF666666)),
const SizedBox(width: 4),
Text('${_images.length}', style: const TextStyle(fontSize: 12, color: Color(0xFF666666))),
],
),
),
const Spacer(),
InkWell(
onTap: _pickImage,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(8),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.add_photo_alternate_outlined, size: 18, color: Colors.white),
SizedBox(width: 6),
Text('添加图片', style: TextStyle(fontSize: 13, fontWeight: FontWeight.w500, color: Colors.white)),
],
),
),
),
],
),
);
}
/// 根据 _editorMode 构建内容区域
Widget _buildContentArea() {
switch (_editorMode) {
case 'edit':
return _buildEditor();
case 'preview':
return _buildPreview();
case 'split':
case 'edit':
default:
return Column(
children: [
Expanded(flex: 1, child: _buildEditor()),
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () => setState(() => _editorMode = 'preview'),
child: Container(
height: 4,
color: const Color(0xFFF5F5F5),
child: Center(
child: Container(
width: 28,
height: 3,
decoration: BoxDecoration(
color: const Color(0xFFD0D0D0),
borderRadius: BorderRadius.circular(1.5),
),
),
),
),
),
Expanded(flex: 1, child: _buildPreview()),
],
);
return _buildEditor();
}
}
@@ -429,9 +392,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
height: 1.6,
),
decoration: InputDecoration(
hintText: _contentType == 'markdown'
? '使用 Markdown 格式书写...'
: '开始书写...',
hintText: '使用 Markdown 格式书写...',
hintStyle: const TextStyle(
fontSize: 16,
color: Color(0xFFCCCCCC),
@@ -443,10 +404,13 @@ class _NoteFormPageState extends State<NoteFormPage> {
);
}
/// 实时 Markdown 预览
/// 实时 Markdown 预览（点击回到编辑）
Widget _buildPreview() {
final text = _contentController.text;
return Container(
return GestureDetector(
onTap: () => setState(() => _editorMode = 'edit'),
behavior: HitTestBehavior.opaque,
child: Container(
color: const Color(0xFFFAFAFA),
child: text.isEmpty
? const Center(
@@ -506,262 +470,72 @@ class _NoteFormPageState extends State<NoteFormPage> {
),
),
),
);
}
/// 构建格式选择器
Widget _buildFormatSelector() {
return GestureDetector(
onTap: () => _showFormatSelector(),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_contentType == 'markdown' ? Icons.code : Icons.text_fields,
size: 16,
color: const Color(0xFF666666),
),
const SizedBox(width: 6),
Text(
_contentType == 'markdown' ? 'Markdown' : '纯文本',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: Color(0xFF666666),
),
),
const SizedBox(width: 4),
const Icon(
Icons.arrow_drop_down,
size: 18,
color: Color(0xFF999999),
),
],
),
),
);
}
/// 显示格式选择对话框
void _showFormatSelector() {
showModalBottomSheet(
context: context,
backgroundColor: Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
),
builder: (context) => SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 顶部指示条
Container(
margin: const EdgeInsets.only(top: 12, bottom: 16),
width: 40,
height: 4,
decoration: BoxDecoration(
color: const Color(0xFFE0E0E0),
borderRadius: BorderRadius.circular(2),
),
),
// 标题
const Padding(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
child: Row(
children: [
Text(
'选择格式',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
],
),
),
const SizedBox(height: 8),
_buildFormatOption(
icon: Icons.code,
title: 'Markdown',
subtitle: '支持 Markdown 语法',
isSelected: _contentType == 'markdown',
onTap: () {
setState(() => _contentType = 'markdown');
Navigator.pop(context);
},
),
_buildFormatOption(
icon: Icons.text_fields,
title: '纯文本',
subtitle: '普通文本格式，支持图片',
isSelected: _contentType == 'plain_text',
onTap: () {
setState(() => _contentType = 'plain_text');
Navigator.pop(context);
},
),
const SizedBox(height: 16),
],
),
),
);
}
/// 构建格式选项
Widget _buildFormatOption({
required IconData icon,
required String title,
required String subtitle,
required bool isSelected,
required VoidCallback onTap,
}) {
return InkWell(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 16),
child: Row(
children: [
Container(
width: 44,
height: 44,
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(10),
),
child: Icon(
icon,
size: 22,
color: const Color(0xFF666666),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Color(0xFF1A1A1A),
),
),
const SizedBox(height: 4),
Text(
subtitle,
style: const TextStyle(
fontSize: 13,
color: Color(0xFF999999),
),
),
],
),
),
if (isSelected)
Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(12),
),
child: const Icon(
Icons.check,
size: 16,
color: Colors.white,
),
),
],
),
),
);
));
}
/// 构建标签选择器
Widget _buildTagSelector() {
return Wrap(
spacing: 10,
runSpacing: 8,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
..._tags.asMap().entries.map((entry) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
entry.value,
style: const TextStyle(
fontSize: 13,
color: Color(0xFF666666),
),
),
const SizedBox(width: 6),
GestureDetector(
onTap: () => setState(() => _tags.removeAt(entry.key)),
child: Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: const Color(0xFFE8E8E8),
borderRadius: BorderRadius.circular(4),
),
child: const Icon(
Icons.close,
size: 10,
color: Color(0xFF999999),
),
),
),
],
),
);
}),
// 添加标签按钮
GestureDetector(
onTap: () => _showAddTagDialog(),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.add,
size: 14,
color: Color(0xFF999999),
),
SizedBox(width: 4),
Text(
'标签',
style: TextStyle(
fontSize: 13,
color: Color(0xFF999999),
),
),
],
),
/// 构建标签横向滚动行
Widget _buildTagRow() {
return Container(
height: 28,
margin: const EdgeInsets.only(top: 6, bottom: 2),
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16),
itemCount: _tags.length + 1,
separatorBuilder: (_, __) => const SizedBox(width: 6),
itemBuilder: (context, index) {
if (index < _tags.length) {
return _buildTagChip(index);
}
return _buildAddTagButton();
},
),
);
}
Widget _buildTagChip(int index) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(6),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
_tags[index],
style: const TextStyle(fontSize: 11, color: Color(0xFF666666)),
),
const SizedBox(width: 3),
GestureDetector(
onTap: () => setState(() => _tags.removeAt(index)),
child: const Icon(Icons.close, size: 10, color: Color(0xFFBBBBBB)),
),
],
),
);
}
Widget _buildAddTagButton() {
return GestureDetector(
onTap: _showAddTagDialog,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(6),
border: Border.all(color: const Color(0xFFDDDDDD), width: 1),
),
],
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.add, size: 12, color: Color(0xFFAAAAAA)),
SizedBox(width: 2),
Text('标签', style: TextStyle(fontSize: 11, color: Color(0xFFAAAAAA))),
],
),
),
);
}
@@ -837,32 +611,29 @@ class _NoteFormPageState extends State<NoteFormPage> {
),
),
const SizedBox(height: 12),
Wrap(
spacing: 10,
runSpacing: 10,
children: availableTags.map((tag) {
return GestureDetector(
onTap: () {
_addTag(tag);
Navigator.pop(context);
},
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: Text(
tag,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF666666),
SizedBox(
height: 200,
child: ListView(
shrinkWrap: true,
children: availableTags.map((tag) {
return InkWell(
onTap: () {
_addTag(tag);
Navigator.pop(context);
},
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 6),
child: Text(
tag,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF555555),
),
),
),
),
);
}).toList(),
);
}).toList(),
),
),
],
],
@@ -916,17 +687,98 @@ class _NoteFormPageState extends State<NoteFormPage> {
}
}
/// 格式化日期时间
String _formatDateTime(DateTime date) {
return '${date.year}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')} ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
Widget _buildAppBarTitle() {
final base = _isEditing ? '编辑笔记' : '新建笔记';
final t = _titleController.text.trim();
if (t.isEmpty) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(base),
const SizedBox(width: 6),
const Icon(Icons.edit, size: 14, color: Color(0xFF999999)),
],
);
}
final display = t.length > 4 ? '${t.substring(0, 4)}…' : t;
return Text('$base（$display）');
}
/// 长按标题弹出标题编辑窗口
void _showTitleDialog() {
final controller = TextEditingController(text: _titleController.text);
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: TextField(
controller: controller,
autofocus: true,
style: const TextStyle(fontSize: 16, color: Color(0xFF1A1A1A)),
decoration: InputDecoration(
hintText: '输入标题...',
hintStyle: const TextStyle(fontSize: 14, color: Color(0xFFCCCCCC)),
filled: true,
fillColor: const Color(0xFFFAFAFA),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: Color(0xFFE8E8E8), width: 0.5),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: const BorderSide(color: Color(0xFF1A1A1A), width: 1),
),
contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
),
onSubmitted: (value) {
setState(() => _titleController.text = value.trim());
Navigator.pop(context);
},
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
style: TextButton.styleFrom(
foregroundColor: const Color(0xFF666666),
),
child: const Text('取消'),
),
ElevatedButton(
onPressed: () {
setState(() => _titleController.text = controller.text.trim());
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF1A1A1A),
foregroundColor: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('确定'),
),
],
actionsPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
),
);
}
/// 保存笔记
Future<void> _saveNote() async {
final content = _contentController.text.trim();
if (content.isEmpty) {
ToastUtil.show(context, '笔记内容不能为空');
final title = _titleController.text.trim();
if (title.isEmpty && content.isEmpty) {
ToastUtil.show(context, '标题或内容不能为空');
return;
}
@@ -935,8 +787,8 @@ class _NoteFormPageState extends State<NoteFormPage> {
if (_isEditing) {
// 更新现有笔记
final updatedNote = widget.note!.copyWith(
title: _titleController.text.trim(),
content: content,
contentType: _contentType,
tags: _tags,
images: _images,
updatedAt: now,
@@ -955,10 +807,12 @@ class _NoteFormPageState extends State<NoteFormPage> {
finalImages = await _moveImagesToNewId(oldNoteId, newNoteId);
}
final title = _titleController.text.trim();
final newNote = Note(
id: noteId,
title: title,
content: content,
contentType: _contentType,
tags: _tags,
images: finalImages.isNotEmpty ? finalImages : _images,
createdAt: _createdAt,
@@ -1054,35 +908,84 @@ class _NoteFormPageState extends State<NoteFormPage> {
}
}
/// 构建图片项
Widget _buildImageItem(int index) {
/// 构建图片横向滚动行
Widget _buildImageRow() {
if (_images.isEmpty) {
return Container(
height: 80,
decoration: const BoxDecoration(
color: Colors.white,
),
child: ListView(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
children: [
_buildAddImageButton(),
],
),
);
}
return Container(
height: 88,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.02),
blurRadius: 4,
offset: const Offset(0, -1),
),
],
),
child: ListView.separated(
scrollDirection: Axis.horizontal,
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
itemCount: _images.length + 1,
separatorBuilder: (_, __) => const SizedBox(width: 10),
itemBuilder: (context, index) {
if (index < _images.length) {
return _buildImageItem(index);
}
return _buildAddImageButton();
},
),
);
}
/// 添加图片按钮
Widget _buildAddImageButton() {
return InkWell(
onTap: () => _showImagePreview(index),
onLongPress: () => _showDeleteImageDialog(index),
onTap: _pickImage,
borderRadius: BorderRadius.circular(12),
child: Container(
width: 64,
height: 64,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
borderRadius: BorderRadius.circular(12),
color: const Color(0xFFF8F8F8),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
clipBehavior: Clip.antiAlias,
child: Image.file(
File(_images[index]),
fit: BoxFit.cover,
child: const Icon(
Icons.add_photo_alternate_outlined,
size: 24,
color: Color(0xFFBBBBBB),
),
),
);
}
/// 构建横向图片项（用于底部图片栏）
Widget _buildHorizontalImageItem(int index) {
/// 构建图片项
Widget _buildImageItem(int index) {
return InkWell(
onTap: () => _showImagePreview(index),
onLongPress: () => _showDeleteImageDialog(index),
borderRadius: BorderRadius.circular(12),
child: Container(
width: 84,
height: 84,
width: 64,
height: 64,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
clipBehavior: Clip.antiAlias,

263
lib/pages/note/note_share_page.dart Normal file
View File

@@ -0,0 +1,263 @@
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';
import '../../models/data_models.dart';
import '../../utils/toast_util.dart';
/// 笔记分享海报页面
class NoteSharePage extends StatefulWidget {
final Note note;
const NoteSharePage({super.key, required this.note});
@override
State<NoteSharePage> createState() => _NoteSharePageState();
}
class _NoteSharePageState extends State<NoteSharePage> {
final GlobalKey _posterKey = GlobalKey();
bool _isGenerating = false;
static const _weekdays = ['一', '二', '三', '四', '五', '六', '日'];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF5F5F5),
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0,
leading: IconButton(
icon: const Icon(Icons.close, color: Color(0xFF1A1A1A)),
onPressed: () => Navigator.pop(context),
),
title: const Text(
'分享笔记',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
centerTitle: true,
actions: [
TextButton(
onPressed: _isGenerating ? null : _generateAndShare,
child: _isGenerating
? const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Text(
'分享',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
),
const SizedBox(width: 8),
],
),
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: RepaintBoundary(
key: _posterKey,
child: _buildPosterWidget(),
),
),
),
);
}
Widget _buildPosterWidget() {
final note = widget.note;
final hasImages = note.images.isNotEmpty;
final dateStr =
'${note.createdAt.year}/${note.createdAt.month.toString().padLeft(2, '0')}/${note.createdAt.day.toString().padLeft(2, '0')} '
'周${_weekdays[note.createdAt.weekday - 1]} '
'${note.createdAt.hour.toString().padLeft(2, '0')}:${note.createdAt.minute.toString().padLeft(2, '0')}';
return Container(
width: 320,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.1),
blurRadius: 20,
offset: const Offset(0, 10),
),
],
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 首张图片
if (hasImages && File(note.images.first).existsSync())
ClipRRect(
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
child: Image.file(
File(note.images.first),
width: 320,
height: 200,
fit: BoxFit.cover,
),
),
// 内容区域
Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题
if (note.title.isNotEmpty) ...[
Text(
note.title,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Color(0xFF1A1A1A),
),
),
const SizedBox(height: 4),
],
// 日期
Text(
dateStr,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF999999),
),
),
// 标签
if (note.tags.isNotEmpty) ...[
const SizedBox(height: 12),
Wrap(
spacing: 6,
runSpacing: 6,
children: note.tags.map((tag) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
decoration: BoxDecoration(
color: const Color(0xFFF0F0F0),
borderRadius: BorderRadius.circular(4),
),
child: Text(
tag,
style: const TextStyle(fontSize: 11, color: Color(0xFF888888)),
),
);
}).toList(),
),
],
const SizedBox(height: 16),
Container(height: 0.5, color: const Color(0xFFE8E8E8)),
const SizedBox(height: 16),
// 正文内容
Text(
note.content,
maxLines: 12,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
color: Color(0xFF333333),
height: 1.8,
),
),
// 字数和图片数
const SizedBox(height: 16),
Row(
children: [
_buildMetaChip(Icons.text_fields_outlined, '${note.content.length} 字'),
if (hasImages) ...[
const SizedBox(width: 12),
_buildMetaChip(Icons.image_outlined, '${note.images.length} 图'),
],
const Spacer(),
// Mooknote 品牌
const Text(
'Mooknote',
style: TextStyle(
fontSize: 11,
color: Color(0xFFCCCCCC),
fontWeight: FontWeight.w500,
),
),
],
),
],
),
),
],
),
);
}
Widget _buildMetaChip(IconData icon, String text) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 13, color: const Color(0xFFAAAAAA)),
const SizedBox(width: 4),
Text(
text,
style: const TextStyle(fontSize: 11, color: Color(0xFFAAAAAA)),
),
],
);
}
Future<void> _generateAndShare() async {
setState(() => _isGenerating = true);
try {
final boundary = _posterKey.currentContext?.findRenderObject()
as RenderRepaintBoundary?;
if (boundary == null) {
throw Exception('无法获取海报边界');
}
final image = await boundary.toImage(pixelRatio: 3.0);
final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
if (byteData == null) {
throw Exception('无法生成图片数据');
}
final bytes = byteData.buffer.asUint8List();
final tempDir = await getTemporaryDirectory();
final fileName = 'note_share_${DateTime.now().millisecondsSinceEpoch}.png';
final file = File('${tempDir.path}/$fileName');
await file.writeAsBytes(bytes);
await Share.shareXFiles(
[XFile(file.path)],
text: '分享笔记：${widget.note.title.isNotEmpty ? widget.note.title : '无标题'}',
);
} catch (e) {
if (mounted) {
ToastUtil.show(context, '生成海报失败：$e');
}
} finally {
if (mounted) {
setState(() => _isGenerating = false);
}
}
}
}