界面功能优化

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

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,