factor:布局颜色重构

lib/layout/app_drawer.dart

@@ -0,0 +1,121 @@
+import 'package:blog_app/layout/menu.dart';
+import 'package:blog_app/layout/theme_layout.dart';
+import 'package:flutter/material.dart';
+
+class AppDrawer extends StatefulWidget {
+  final int currentPageIndex;
+  final Function(int) onTapDrawerItem;
+
+  const AppDrawer({
+    super.key,
+    required this.currentPageIndex,
+    required this.onTapDrawerItem,
+  });
+
+  @override
+  State<AppDrawer> createState() => AppDrawerState();
+}
+
+class AppDrawerState extends State<AppDrawer> {
+  Widget _buildDrawerHeader() {
+    final colors = Theme.of(context).colorScheme;
+
+    return Container(
+      width: double.infinity,
+      height: 200,
+      decoration: BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          colors: [colors.primary, colors.inversePrimary],
+        ),
+      ),
+      child: SafeArea(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            ClipOval(
+              child: Image.asset(
+                'assets/images/avatar.jpg',
+                width: 80,
+                height: 80,
+                fit: BoxFit.cover,
+              ),
+            ),
+            SizedBox(height: 16),
+            Text(
+              'Cxx0822',
+              style: TextStyle(
+                color: colors.surface,
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDrawerBody() {
+    return ListView.separated(
+      shrinkWrap: true,
+      padding: EdgeInsets.zero,
+      itemCount: pages.length,
+      separatorBuilder: (context, index) => SizedBox(height: 8),
+      itemBuilder: (context, index) => _buildDrawerItem(index),
+    );
+  }
+
+  Widget _buildDrawerItem(int index) {
+    final colors = Theme.of(context).colorScheme;
+    final isSelected = index == widget.currentPageIndex;
+    final boxColor =
+        isSelected ? colors.primary.withAlpha(50) : Colors.transparent;
+    final iconColor =
+        isSelected ? colors.primary : colors.onSurface.withAlpha(100);
+    final textColor =
+        isSelected ? colors.primary : colors.onSurface.withAlpha(200);
+
+    return Container(
+      margin: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+      decoration: BoxDecoration(
+        color: boxColor,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: ListTile(
+        leading: Icon(pages[index].icon, color: iconColor, size: 24),
+        title: Text(
+          pages[index].title,
+          style: TextStyle(
+            color: textColor,
+            fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+            fontSize: 16,
+          ),
+        ),
+        trailing:
+            isSelected
+                ? Icon(Icons.arrow_forward_ios, size: 16, color: iconColor)
+                : null,
+        onTap: () => widget.onTapDrawerItem(index),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Drawer(
+      child: Container(
+        color: Theme.of(context).colorScheme.surface,
+        child: Column(
+          children: [
+            _buildDrawerHeader(),
+            _buildDrawerBody(),
+            const Divider(),
+            ThemeLayout(),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/layout/app_navbar.dart

@@ -0,0 +1,36 @@
+import 'package:blog_app/layout/menu.dart';
+import 'package:flutter/material.dart';
+
+class AppNavbar extends StatefulWidget {
+  final int currentPageIndex;
+  final Function(int) onTapNavbarItem;
+
+  const AppNavbar({
+    super.key,
+    required this.currentPageIndex,
+    required this.onTapNavbarItem,
+  });
+
+  @override
+  State<AppNavbar> createState() => AppNavbarState();
+}
+
+class AppNavbarState extends State<AppNavbar> {
+  @override
+  Widget build(BuildContext context) {
+    final colors = Theme.of(context).colorScheme;
+
+    return BottomNavigationBar(
+      currentIndex: widget.currentPageIndex,
+      onTap: widget.onTapNavbarItem,
+      items: bottomNavItems,
+      type: BottomNavigationBarType.fixed,
+      selectedItemColor: colors.primary,
+      unselectedItemColor: colors.onSurface.withAlpha(150),
+      showSelectedLabels: true,
+      showUnselectedLabels: true,
+      backgroundColor: colors.surface,
+      elevation: 8,
+    );
+  }
+}

lib/layout/drawer.dart

@@ -1,79 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'menu.dart';
-
-Widget buildDrawerHeader(BuildContext context) {
-  final colors = Theme.of(context).colorScheme;
-  return Container(
-    width: double.infinity,
-    height: 200,
-    decoration: BoxDecoration(
-      gradient: LinearGradient(
-        begin: Alignment.topLeft,
-        end: Alignment.bottomRight,
-        colors: [colors.primary, colors.inversePrimary],
-      ),
-    ),
-    child: SafeArea(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          ClipOval(
-            child: Image.asset(
-              'assets/images/avatar.jpg',
-              width: 80,
-              height: 80,
-              fit: BoxFit.cover,
-            ),
-          ),
-          SizedBox(height: 16),
-          Text(
-            'Cxx0822',
-            style: TextStyle(
-              color: Colors.white,
-              fontSize: 20,
-              fontWeight: FontWeight.bold,
-            ),
-          ),
-        ],
-      ),
-    ),
-  );
-}
-
-Widget buildDrawerItem({
-  required BuildContext context,
-  required PageInfo page,
-  required VoidCallback onTap,
-  required bool isSelected,
-}) {
-  final colors = Theme.of(context).colorScheme;
-
-  return Container(
-    margin: EdgeInsets.symmetric(horizontal: 12, vertical: 4),
-    decoration: BoxDecoration(
-      color: isSelected ? colors.primary.withAlpha(50) : Colors.transparent,
-      borderRadius: BorderRadius.circular(12),
-    ),
-    child: ListTile(
-      leading: Icon(
-        page.icon,
-        color: isSelected ? colors.primary : Colors.grey[700],
-        size: 24,
-      ),
-      title: Text(
-        page.title,
-        style: TextStyle(
-          color: isSelected ? colors.primary : Colors.grey[800],
-          fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
-          fontSize: 16,
-        ),
-      ),
-      trailing:
-          isSelected
-              ? Icon(Icons.arrow_forward_ios, size: 16, color: colors.primary)
-              : null,
-      onTap: onTap,
-    ),
-  );
-}

lib/layout/nav_bar.dart

@@ -1,22 +0,0 @@
-import 'package:flutter/material.dart';
-
-import 'menu.dart';
-
-Widget buildBottomNavigationBar({
-  required BuildContext context,
-  required int index,
-  required Function(int) onTap,
-}) {
-  return BottomNavigationBar(
-    currentIndex: index,
-    onTap: onTap,
-    items: bottomNavItems,
-    type: BottomNavigationBarType.fixed,
-    selectedItemColor: Theme.of(context).colorScheme.primary,
-    unselectedItemColor: Colors.grey,
-    showSelectedLabels: true,
-    showUnselectedLabels: true,
-    backgroundColor: Colors.white,
-    elevation: 8,
-  );
-}

lib/layout/theme_layout.dart

@@ -0,0 +1,128 @@
+import 'package:blog_app/provider/theme_provider.dart';
+import 'package:blog_app/utils/theme_utils.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class ThemeLayout extends StatelessWidget {
+  final Widget? child;
+
+  const ThemeLayout({super.key, this.child});
+
+  Widget _buildThemeColorList(BuildContext context, ThemeProvider provider) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+      child: GridView.builder(
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+          crossAxisCount: 4,
+          crossAxisSpacing: 8,
+          mainAxisSpacing: 8,
+          childAspectRatio: 1.2,
+        ),
+        itemCount: provider.availableThemes.length,
+        itemBuilder: (context, index) {
+          final themeColor = provider.availableThemes[index];
+          final isSelected = provider.currentTheme == themeColor;
+
+          return _buildThemeColorItem(
+            themeColor: themeColor,
+            isSelected: isSelected,
+            onTap: () => provider.changeTheme(themeColor),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildThemeColorItem({
+    required ThemeColor themeColor,
+    required bool isSelected,
+    required VoidCallback onTap,
+  }) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        decoration: BoxDecoration(
+          color:
+              isSelected
+                  ? themeColor.primaryColor.withAlpha(50)
+                  : Colors.transparent,
+          borderRadius: BorderRadius.circular(8),
+          border: Border.all(
+            color: isSelected ? themeColor.primaryColor : Colors.grey.shade300,
+            width: isSelected ? 2 : 1,
+          ),
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            // 颜色圆点
+            Container(
+              width: 20,
+              height: 20,
+              decoration: BoxDecoration(
+                color: themeColor.primaryColor,
+                shape: BoxShape.circle,
+                border: Border.all(color: Colors.white, width: 2),
+                boxShadow: [
+                  BoxShadow(
+                    color: Colors.black.withAlpha(10),
+                    blurRadius: 2,
+                    offset: const Offset(0, 1),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 4),
+            Text(
+              themeColor.name,
+              style: TextStyle(
+                fontSize: 10,
+                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+                color:
+                    isSelected ? themeColor.primaryColor : Colors.grey.shade600,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _buildDarkModeSection(BuildContext context, ThemeProvider provider) {
+    return ListTile(
+      leading: Icon(
+        provider.isDarkMode ? Icons.dark_mode : Icons.light_mode,
+        color: Theme.of(context).colorScheme.primary,
+      ),
+      title: const Text('暗黑模式'),
+      trailing: Switch(
+        value: provider.isDarkMode,
+        onChanged: (value) {
+          provider.toggleDarkMode(value);
+        },
+      ),
+      onTap: () {
+        provider.toggleDarkMode(!provider.isDarkMode);
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final provider = context.watch<ThemeProvider>();
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
+          child: Text('主题颜色', style: Theme.of(context).textTheme.titleMedium),
+        ),
+        _buildDarkModeSection(context, provider),
+        _buildThemeColorList(context, provider),
+      ],
+    );
+  }
+}