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-03-21 14:42:33 +08:00
parent cc4c908c86
commit be2974146f
10 changed files with 1048 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,11 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text(_getTitle(note.content)),
title: Text(
_getTitle(note.content),
overflow: TextOverflow.ellipsis,
maxLines: 1,
),
actions: [
// 格式指示器 - 纯文本标记
if (note.contentType == 'markdown')
@@ -337,15 +341,13 @@ class _NoteDetailPageState extends State<NoteDetailPage> {
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')}';
}
/// 获取标题（内容前5个字）
/// 获取标题（内容第一行，去除换行）
String _getTitle(String content) {
if (content.isEmpty) return '无标题';
// 移除换行符和多余空格
final trimmed = content.replaceAll('\n', ' ').trim();
if (trimmed.isEmpty) return '无标题';
// 取前5个字
if (trimmed.length <= 5) return trimmed;
return '${trimmed.substring(0, 5)}...';
return trimmed;
}
/// 跳转到编辑页面

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

@@ -23,7 +23,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
late DateTime _createdAt;
List<String> _tags = [];
List<String> _images = []; // 图片路径列表
String _contentType = 'markdown'; // markdown / plain_text
String _contentType = 'plain_text'; // markdown / plain_text
bool _isEditing = false;
final ImagePicker _picker = ImagePicker();
String? _tempNoteId; // 新建模式时使用的临时笔记ID
@@ -36,7 +36,7 @@ class _NoteFormPageState extends State<NoteFormPage> {
_createdAt = note?.createdAt ?? DateTime.now();
_tags = note != null ? List.from(note.tags) : [];
_images = note != null ? List.from(note.images) : [];
_contentType = note?.contentType ?? 'markdown';
_contentType = note?.contentType ?? 'plain_text';
_isEditing = note != null;
}
@@ -104,191 +104,125 @@ class _NoteFormPageState extends State<NoteFormPage> {
),
),
// 书写区域（纯文本模式下占据35%高度，Markdown模式下占据全部）
if (_contentType == 'plain_text')
SizedBox(
height: MediaQuery.of(context).size.height * 0.35,
child: TextField(
controller: _contentController,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
style: const TextStyle(
// 书写区域
Expanded(
child: TextField(
controller: _contentController,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
style: const TextStyle(
fontSize: 16,
color: Color(0xFF1A1A1A),
height: 1.6,
),
decoration: InputDecoration(
hintText: _contentType == 'markdown'
? '使用 Markdown 格式书写...'
: '开始书写...',
hintStyle: const TextStyle(
fontSize: 16,
color: Color(0xFF1A1A1A),
height: 1.6,
color: Color(0xFFCCCCCC),
),
decoration: const InputDecoration(
hintText: '开始书写...',
hintStyle: TextStyle(
fontSize: 16,
color: Color(0xFFCCCCCC),
),
border: InputBorder.none,
contentPadding: EdgeInsets.all(16),
border: InputBorder.none,
contentPadding: const EdgeInsets.all(16),
),
),
),
// 图片区域（放在内容下方）
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),
),
),
)
else
Expanded(
child: TextField(
controller: _contentController,
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
style: const TextStyle(
fontSize: 16,
color: Color(0xFF1A1A1A),
height: 1.6,
),
decoration: const InputDecoration(
hintText: '使用 Markdown 格式书写...',
hintStyle: TextStyle(
fontSize: 16,
color: Color(0xFFCCCCCC),
),
border: InputBorder.none,
contentPadding: EdgeInsets.all(16),
),
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _images.length,
separatorBuilder: (context, index) => const SizedBox(width: 8),
itemBuilder: (context, index) {
return _buildHorizontalImageItem(index);
},
),
),
// 纯文本模式下的图片区域
if (_contentType == 'plain_text') ...[
// 图片网格区域
Expanded(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题栏
Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: const Color(0xFFE8E8E8), width: 0.5),
),
child: const Icon(
Icons.image_outlined,
size: 18,
color: Color(0xFF666666),
),
),
const SizedBox(width: 12),
const Text(
'图片',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Color(0xFF1A1A1A),
),
),
const SizedBox(width: 8),
Text(
'${_images.length}',
style: const TextStyle(
fontSize: 15,
color: Color(0xFF999999),
),
),
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,
size: 18,
color: Colors.white,
),
SizedBox(width: 6),
Text(
'添加',
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
],
),
),
),
],
),
const SizedBox(height: 16),
// 图片网格（4列，正方形铺满）
Expanded(
child: _images.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: const Color(0xFFFAFAFA),
borderRadius: BorderRadius.circular(20),
),
child: const Icon(
Icons.image_outlined,
size: 40,
color: Color(0xFFCCCCCC),
),
),
const SizedBox(height: 16),
const Text(
'暂无图片',
style: TextStyle(
fontSize: 15,
color: Color(0xFF999999),
),
),
const SizedBox(height: 8),
const Text(
'点击右上角添加按钮添加图片',
style: TextStyle(
fontSize: 13,
color: Color(0xFFBBBBBB),
),
),
],
),
)
: GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
childAspectRatio: 1.0,
),
itemCount: _images.length,
itemBuilder: (context, index) {
return _buildImageItem(index);
},
),
),
],
// 底部工具栏（纯文本模式下显示添加图片按钮）
if (_contentType == 'plain_text')
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
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,
),
),
],
),
),
),
],
),
),
],
],
),
);
@@ -858,6 +792,27 @@ class _NoteFormPageState extends State<NoteFormPage> {
);
}
/// 构建横向图片项（用于底部图片栏）
Widget _buildHorizontalImageItem(int index) {
return InkWell(
onTap: () => _showImagePreview(index),
onLongPress: () => _showDeleteImageDialog(index),
child: Container(
width: 84,
height: 84,
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,
),
),
);
}
/// 显示图片预览
void _showImagePreview(int index) {
showDialog(