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,62 +186,59 @@ 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 = e.$1;
final index = ctr.colorThemes.indexOf(e); final item = e.$2;
return GestureDetector( return GestureDetector(
onTap: () { behavior: HitTestBehavior.opaque,
ctr.currentColor.value = index; onTap: () {
ctr.setting ctr
.put(SettingBoxKey.customColor, index); ..currentColor.value = index
Get.forceAppUpdate(); ..setting.put(SettingBoxKey.customColor, index);
}, Get.forceAppUpdate();
child: Column( },
children: [ child: Column(
Container( spacing: 3,
width: 46, children: [
height: 46, Container(
decoration: BoxDecoration( width: 46,
color: e['color'].withValues(alpha: 0.8), height: 46,
borderRadius: const BorderRadius.all( decoration: BoxDecoration(
Radius.circular(50)), shape: BoxShape.circle,
border: Border.all( color: item.color.withValues(alpha: 0.8),
width: 2, border: Border.all(
color: ctr.currentColor.value == index width: 2,
? Colors.black color: ctr.currentColor.value == index
: e['color'].withValues(alpha: 0.8), ? Colors.black
), : item.color.withValues(alpha: 0.8),
),
child: AnimatedOpacity(
opacity: ctr.currentColor.value == index
? 1
: 0,
duration:
const Duration(milliseconds: 200),
child: const Icon(
Icons.done,
color: Colors.black,
size: 20,
),
), ),
), ),
const SizedBox(height: 3), child: AnimatedOpacity(
Text( opacity:
e['label'], ctr.currentColor.value == index ? 1 : 0,
style: TextStyle( duration: const Duration(milliseconds: 200),
fontSize: 12, child: const Icon(
color: ctr.currentColor.value != index Icons.done,
? theme.colorScheme.outline color: Colors.black,
: null, size: 20,
), ),
), ),
], ),
), Text(
); item.label,
}, style: TextStyle(
) fontSize: 12,
], color: ctr.currentColor.value != index
? theme.colorScheme.outline
: null,
),
),
],
),
);
},
).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;