feat:增加公共组件

2025-11-22 15:19:34 +08:00
parent bc08235794
commit f5ddc4ee04
17 changed files with 1762 additions and 3 deletions
--- a/lib/layout/theme_layout.dart
+++ b/lib/layout/theme_layout.dart
@@ -0,0 +1,129 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../provider/theme_provider.dart';
+import '../utils/theme_utils.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),
+      ],
+    );
+  }
+}