opt color select

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
This commit is contained in:
bggRGjQaUbCoE
2025-05-31 14:08:55 +08:00
parent 4ac05caa28
commit 3364b52e33
5 changed files with 74 additions and 81 deletions

View File

@@ -129,7 +129,7 @@ class MyApp extends StatelessWidget {
// 主题色 // 主题色
Color defaultColor = Color defaultColor =
colorThemeTypes[setting.get(SettingBoxKey.customColor, defaultValue: 0)] colorThemeTypes[setting.get(SettingBoxKey.customColor, defaultValue: 0)]
['color']; .color;
Color brandColor = defaultColor; Color brandColor = defaultColor;
// 是否动态取色 // 是否动态取色
bool isDynamicColor = bool isDynamicColor =

View File

@@ -1,23 +1,23 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
const List<Map<String, dynamic>> colorThemeTypes = [ const List<({Color color, String label})> colorThemeTypes = [
{'color': Color(0xFF5CB67B), 'label': '默认绿'}, (color: Color(0xFF5CB67B), label: '默认绿'),
{'color': Color(0xFFFF7299), 'label': '粉红色'}, (color: Color(0xFFFF7299), label: '粉红色'),
{'color': Colors.red, 'label': '红色'}, (color: Colors.red, label: '红色'),
{'color': Colors.orange, 'label': '橙色'}, (color: Colors.orange, label: '橙色'),
{'color': Colors.amber, 'label': '琥珀色'}, (color: Colors.amber, label: '琥珀色'),
{'color': Colors.yellow, 'label': '黄色'}, (color: Colors.yellow, label: '黄色'),
{'color': Colors.lime, 'label': '酸橙色'}, (color: Colors.lime, label: '酸橙色'),
{'color': Colors.lightGreen, 'label': '浅绿色'}, (color: Colors.lightGreen, label: '浅绿色'),
{'color': Colors.green, 'label': '绿色'}, (color: Colors.green, label: '绿色'),
{'color': Colors.teal, 'label': '青色'}, (color: Colors.teal, label: '青色'),
{'color': Colors.cyan, 'label': '蓝绿色'}, (color: Colors.cyan, label: '蓝绿色'),
{'color': Colors.lightBlue, 'label': '浅蓝色'}, (color: Colors.lightBlue, label: '浅蓝色'),
{'color': Colors.blue, 'label': '蓝色'}, (color: Colors.blue, label: '蓝色'),
{'color': Colors.indigo, 'label': '靛蓝色'}, (color: Colors.indigo, label: '靛蓝色'),
{'color': Colors.purple, 'label': '紫色'}, (color: Colors.purple, label: '紫色'),
{'color': Colors.deepPurple, 'label': '深紫色'}, (color: Colors.deepPurple, label: '深紫色'),
{'color': Colors.blueGrey, 'label': '蓝灰色'}, (color: Colors.blueGrey, label: '蓝灰色'),
{'color': Colors.brown, 'label': '棕色'}, (color: Colors.brown, label: '棕色'),
{'color': Colors.grey, 'label': '灰色'}, (color: Colors.grey, label: '灰色'),
]; ];

View File

@@ -104,9 +104,7 @@ class _HomePageState extends State<HomePage>
_homeController.showUserInfoDialog(context), _homeController.showUserInfoDialog(context),
splashColor: theme.colorScheme.primaryContainer splashColor: theme.colorScheme.primaryContainer
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: const BorderRadius.all( customBorder: const CircleBorder(),
Radius.circular(50),
),
), ),
), ),
), ),

View File

@@ -415,9 +415,7 @@ class _MainAppState extends State<MainApp>
_homeController.showUserInfoDialog(context), _homeController.showUserInfoDialog(context),
splashColor: theme.colorScheme.primaryContainer splashColor: theme.colorScheme.primaryContainer
.withValues(alpha: 0.3), .withValues(alpha: 0.3),
borderRadius: const BorderRadius.all( customBorder: const CircleBorder(),
Radius.circular(50),
),
), ),
), ),
), ),

View File

@@ -186,39 +186,38 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
alignment: WrapAlignment.center, alignment: WrapAlignment.center,
spacing: 22, spacing: 22,
runSpacing: 18, runSpacing: 18,
children: [ children: colorThemeTypes.indexed.map(
...ctr.colorThemes.map(
(e) { (e) {
final index = ctr.colorThemes.indexOf(e); final index = e.$1;
final item = e.$2;
return GestureDetector( return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () { onTap: () {
ctr.currentColor.value = index; ctr
ctr.setting ..currentColor.value = index
.put(SettingBoxKey.customColor, index); ..setting.put(SettingBoxKey.customColor, index);
Get.forceAppUpdate(); Get.forceAppUpdate();
}, },
child: Column( child: Column(
spacing: 3,
children: [ children: [
Container( Container(
width: 46, width: 46,
height: 46, height: 46,
decoration: BoxDecoration( decoration: BoxDecoration(
color: e['color'].withValues(alpha: 0.8), shape: BoxShape.circle,
borderRadius: const BorderRadius.all( color: item.color.withValues(alpha: 0.8),
Radius.circular(50)),
border: Border.all( border: Border.all(
width: 2, width: 2,
color: ctr.currentColor.value == index color: ctr.currentColor.value == index
? Colors.black ? Colors.black
: e['color'].withValues(alpha: 0.8), : item.color.withValues(alpha: 0.8),
), ),
), ),
child: AnimatedOpacity( child: AnimatedOpacity(
opacity: ctr.currentColor.value == index opacity:
? 1 ctr.currentColor.value == index ? 1 : 0,
: 0, duration: const Duration(milliseconds: 200),
duration:
const Duration(milliseconds: 200),
child: const Icon( child: const Icon(
Icons.done, Icons.done,
color: Colors.black, color: Colors.black,
@@ -226,9 +225,8 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
), ),
), ),
), ),
const SizedBox(height: 3),
Text( Text(
e['label'], item.label,
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 12,
color: ctr.currentColor.value != index color: ctr.currentColor.value != index
@@ -240,8 +238,7 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
), ),
); );
}, },
) ).toList(),
],
), ),
), ),
), ),
@@ -249,9 +246,10 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
), ),
...[ ...[
IgnorePointer( IgnorePointer(
child: SizedBox( child: Container(
height: Get.height / 2, height: Get.height / 2,
width: Get.width, width: Get.width,
color: theme.colorScheme.surface,
child: const HomePage(), child: const HomePage(),
), ),
), ),
@@ -278,7 +276,6 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
class ColorSelectController extends GetxController { class ColorSelectController extends GetxController {
RxBool dynamicColor = true.obs; RxBool dynamicColor = true.obs;
RxInt type = 0.obs; RxInt type = 0.obs;
late final List<Map<String, dynamic>> colorThemes = colorThemeTypes;
RxInt currentColor = 0.obs; RxInt currentColor = 0.obs;
RxDouble currentTextScale = 1.0.obs; RxDouble currentTextScale = 1.0.obs;
Rx<ThemeType> themeType = GStorage.themeType.obs; Rx<ThemeType> themeType = GStorage.themeType.obs;