顶部tab栏优化

lib/widgets/book_status_bar.dart

@@ -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});
 
@@ -11,6 +11,7 @@ class BookStatusBar extends StatelessWidget {
     final colors = Theme.of(context).colorScheme;
     return Consumer<AppProvider>(
       builder: (context, provider, child) {
+        final currentIndex = provider.bookStatusIndex;
         return Container(
           padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
           decoration: BoxDecoration(
@@ -23,13 +24,45 @@ class BookStatusBar extends StatelessWidget {
               color: colors.surfaceContainerHighest,
               borderRadius: BorderRadius.circular(24),
             ),
-            child: SizedBox(
-              height: 40,
-              child: Row(children: [
-                _buildTab(colors, '已读', Icons.check_circle_outline, provider.bookStatusIndex == 0, () => provider.setBookStatusIndex(0)),
-                _buildTab(colors, '在读', Icons.menu_book_outlined, provider.bookStatusIndex == 1, () => provider.setBookStatusIndex(1)),
-                _buildTab(colors, '想读', Icons.bookmark_outlined, provider.bookStatusIndex == 2, () => 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: 200),
+                        curve: Curves.easeInOut,
+                        left: currentIndex * tabWidth,
+                        top: 0, bottom: 0, width: tabWidth,
+                        child: Padding(
+                          padding: const EdgeInsets.all(3),
+                          child: Container(
+                            decoration: BoxDecoration(
+                              color: colors.primary,
+                              borderRadius: BorderRadius.circular(20),
+                              boxShadow: [
+                                BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2)),
+                              ],
+                            ),
+                          ),
+                        ),
+                      ),
+                      Row(
+                        children: [
+                          _buildTab(colors, '已读', Icons.check_circle_outline, currentIndex == 0,
+                              () => provider.setBookStatusIndex(0)),
+                          _buildTab(colors, '在读', Icons.menu_book_outlined, currentIndex == 1,
+                              () => provider.setBookStatusIndex(1)),
+                          _buildTab(colors, '想读', Icons.bookmark_outlined, currentIndex == 2,
+                              () => provider.setBookStatusIndex(2)),
+                        ],
+                      ),
+                    ],
+                  ),
+                );
+              },
             ),
           ),
         );
@@ -42,38 +75,23 @@ class BookStatusBar extends StatelessWidget {
       child: GestureDetector(
         behavior: HitTestBehavior.opaque,
         onTap: onTap,
-        child: AnimatedContainer(
-          duration: const Duration(milliseconds: 400),
+        child: AnimatedOpacity(
+          opacity: isSelected ? 1.0 : 0.5,
+          duration: const Duration(milliseconds: 200),
           curve: Curves.easeInOut,
-          margin: const EdgeInsets.all(3),
-          decoration: BoxDecoration(
-            color: isSelected ? colors.primary : Colors.transparent,
-            borderRadius: BorderRadius.circular(20),
-            boxShadow: isSelected ? [BoxShadow(color: Colors.black.withValues(alpha: 0.1), blurRadius: 8, offset: const Offset(0, 2))] : null,
-          ),
-          alignment: Alignment.center,
-          child: AnimatedDefaultTextStyle(
-            duration: const Duration(milliseconds: 400),
-            curve: Curves.easeInOut,
-            style: TextStyle(
-              fontSize: 13,
-              fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
-              color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6),
-            ),
+          child: SizedBox.expand(
             child: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               mainAxisSize: MainAxisSize.min,
               children: [
-                AnimatedSwitcher(
-                  duration: const Duration(milliseconds: 350),
-                  child: Icon(icon, key: ValueKey(isSelected), size: 16,
-                    color: isSelected ? colors.onPrimary : colors.onSurface.withValues(alpha: 0.6)),
-                ),
+                Icon(icon, size: 16, color: isSelected ? colors.onPrimary : colors.onSurface),
                 const SizedBox(width: 6),
-                AnimatedSwitcher(
-                  duration: const Duration(milliseconds: 350),
-                  child: Text(label, key: ValueKey('$label$isSelected')),
-                ),
+                Text(label,
+                    style: TextStyle(
+                      fontSize: 13,
+                      fontWeight: isSelected ? FontWeight.w600 : FontWeight.w500,
+                      color: isSelected ? colors.onPrimary : colors.onSurface,
+                    )),
               ],
             ),
           ),