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

105
lib/widgets/book_status_bar.dart
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});
@@ -24,27 +24,63 @@ class BookStatusBar extends StatelessWidget {
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(24),
),
child: Row(
children: [
_buildStatusItem(
label: '已读',
icon: Icons.check_circle_outline,
isSelected: provider.bookStatusIndex == 0,
onTap: () => provider.setBookStatusIndex(0),
),
_buildStatusItem(
label: '在读',
icon: Icons.menu_book_outlined,
isSelected: provider.bookStatusIndex == 1,
onTap: () => provider.setBookStatusIndex(1),
),
_buildStatusItem(
label: '想读',
icon: Icons.bookmark_outline,
isSelected: provider.bookStatusIndex == 2,
onTap: () => 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: 800),
curve: Curves.elasticOut,
left: provider.bookStatusIndex * tabWidth,
top: 0,
bottom: 0,
width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
),
),
),
Row(
children: [
_buildTab(
label: '已读',
icon: Icons.check_circle_outline,
isSelected: provider.bookStatusIndex == 0,
onTap: () => provider.setBookStatusIndex(0),
),
_buildTab(
label: '在读',
icon: Icons.menu_book_outlined,
isSelected: provider.bookStatusIndex == 1,
onTap: () => provider.setBookStatusIndex(1),
),
_buildTab(
label: '想读',
icon: Icons.bookmark_outlined,
isSelected: provider.bookStatusIndex == 2,
onTap: () => provider.setBookStatusIndex(2),
),
],
),
],
),
);
},
),
),
);
@@ -52,8 +88,7 @@ class BookStatusBar extends StatelessWidget {
);
}
/// 构建状态项
Widget _buildStatusItem({
Widget _buildTab({
required String label,
required IconData icon,
required bool isSelected,
@@ -61,26 +96,14 @@ class BookStatusBar extends StatelessWidget {
}) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: isSelected ? const Color(0xFF1A1A1A) : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected
? [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
]
: null,
),
child: Container(
height: double.infinity,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,

88
lib/widgets/custom_drawer.dart
View File

@@ -260,48 +260,6 @@ class _CustomDrawerState extends State<CustomDrawer> {
),
),
// 分隔线
const Divider(
height: 0.5, thickness: 0.5, color: Color(0xFFEEEEEE)),
// Markdown 阅读
InkWell(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const MdReaderTabPage()),
);
},
borderRadius: BorderRadius.zero,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 13, horizontal: 16),
child: Row(
children: [
Icon(Icons.description_outlined,
size: 18, color: Color(0xFF666666)),
SizedBox(width: 10),
Expanded(
child: Text(
'MD阅读',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF1A1A1A)),
),
),
Text(
'浏览本地 md 文件',
style: TextStyle(fontSize: 11, color: Color(0xFFBBBBBB)),
),
SizedBox(width: 6),
Icon(Icons.chevron_right,
size: 16, color: Color(0xFFCCCCCC)),
],
),
),
),
// 分隔线
const Divider(
height: 0.5, thickness: 0.5, color: Color(0xFFEEEEEE)),
@@ -315,8 +273,7 @@ class _CustomDrawerState extends State<CustomDrawer> {
MaterialPageRoute(builder: (_) => const TagManagementPage()),
);
},
borderRadius:
const BorderRadius.vertical(bottom: Radius.circular(10)),
borderRadius: BorderRadius.zero,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 13, horizontal: 16),
child: Row(
@@ -344,6 +301,49 @@ class _CustomDrawerState extends State<CustomDrawer> {
),
),
),
// 分隔线
const Divider(
height: 0.5, thickness: 0.5, color: Color(0xFFEEEEEE)),
// Markdown 阅读
InkWell(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const MdReaderTabPage()),
);
},
borderRadius:
const BorderRadius.vertical(bottom: Radius.circular(10)),
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 13, horizontal: 16),
child: Row(
children: [
Icon(Icons.description_outlined,
size: 18, color: Color(0xFF666666)),
SizedBox(width: 10),
Expanded(
child: Text(
'MD阅读',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF1A1A1A)),
),
),
Text(
'浏览本地 md 文件',
style: TextStyle(fontSize: 11, color: Color(0xFFBBBBBB)),
),
SizedBox(width: 6),
Icon(Icons.chevron_right,
size: 16, color: Color(0xFFCCCCCC)),
],
),
),
),
],
),
),

105
lib/widgets/movie_status_bar.dart
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});
@@ -24,27 +24,63 @@ class MovieStatusBar extends StatelessWidget {
color: const Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(24),
),
child: Row(
children: [
_buildStatusItem(
label: '已看',
icon: Icons.check_circle_outline,
isSelected: provider.movieStatusIndex == 0,
onTap: () => provider.setMovieStatusIndex(0),
),
_buildStatusItem(
label: '在看',
icon: Icons.play_circle_outline,
isSelected: provider.movieStatusIndex == 1,
onTap: () => provider.setMovieStatusIndex(1),
),
_buildStatusItem(
label: '想看',
icon: Icons.bookmark_outline,
isSelected: provider.movieStatusIndex == 2,
onTap: () => 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: 800),
curve: Curves.elasticOut,
left: provider.movieStatusIndex * tabWidth,
top: 0,
bottom: 0,
width: tabWidth,
child: Padding(
padding: const EdgeInsets.all(3),
child: Container(
decoration: BoxDecoration(
color: const Color(0xFF1A1A1A),
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
],
),
),
),
),
Row(
children: [
_buildTab(
label: '已看',
icon: Icons.check_circle_outline,
isSelected: provider.movieStatusIndex == 0,
onTap: () => provider.setMovieStatusIndex(0),
),
_buildTab(
label: '在看',
icon: Icons.play_circle_outline,
isSelected: provider.movieStatusIndex == 1,
onTap: () => provider.setMovieStatusIndex(1),
),
_buildTab(
label: '想看',
icon: Icons.bookmark_outline,
isSelected: provider.movieStatusIndex == 2,
onTap: () => provider.setMovieStatusIndex(2),
),
],
),
],
),
);
},
),
),
);
@@ -52,8 +88,7 @@ class MovieStatusBar extends StatelessWidget {
);
}
/// 构建状态项
Widget _buildStatusItem({
Widget _buildTab({
required String label,
required IconData icon,
required bool isSelected,
@@ -61,26 +96,14 @@ class MovieStatusBar extends StatelessWidget {
}) {
return Expanded(
child: GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
curve: Curves.easeInOut,
padding: const EdgeInsets.symmetric(vertical: 10),
decoration: BoxDecoration(
color: isSelected ? const Color(0xFF1A1A1A) : Colors.transparent,
borderRadius: BorderRadius.circular(20),
boxShadow: isSelected
? [
BoxShadow(
color: Colors.black.withValues(alpha: 0.1),
blurRadius: 8,
offset: const Offset(0, 2),
),
]
: null,
),
child: Container(
height: double.infinity,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,