五合一免费建站,拍卖 网站 建设,网站建设与维护大作业,wordpress列表页缩略图我们紧接上篇文章#xff0c;今天继续讲解一下强大的 GetX 的另一个功能#xff0c;就是 暗黑模式 #xff0c;在iOS 13开始苹果的应用慢慢的都开始适配 暗黑模式#xff0c;andr。oid 也慢慢的 开始跟进#xff0c;截止到目前#xff0c;商店的大部分应用都已经完成了 暗…我们紧接上篇文章今天继续讲解一下强大的 GetX 的另一个功能就是 暗黑模式 在iOS 13开始苹果的应用慢慢的都开始适配 暗黑模式andr。oid 也慢慢的 开始跟进截止到目前商店的大部分应用都已经完成了 暗黑模式 的适配。
原生开发为我们提供对应的 API那么Flutter呢其实Flutter也为我们提供了那就是Theme了示例代码如下
MaterialApp(title: Flutter Demo,themeMode: ThemeMode.system,darkTheme: ThemeData(primarySwatch: Colors.red,),theme: ThemeData(primarySwatch: Colors.blue,),highContrastTheme: ThemeData(),highContrastDarkTheme: ThemeData(),home: MyHomePage(title: Flutter Demo Home Page),)
从上面代码可以看出我们需要创建对应的主题颜色数据具体都定义哪些我们可以查看ThemeData源码这里就不做过多介绍了。下面我着重讲解一下GetX 如何完成暗黑模式的适配。
还是老样子我们要使用GetX作为程序入口。
代码如下
GetMaterialApp(getPages: pages,initialRoute: _getRouter,theme: ThemeData(brightness: Brightness.light),darkTheme: ThemeData(brightness: Brightness.dark),);
其中theme darkTheme就是我们要使用的两个主题一个是正常模式、另一个就是暗黑模式。
到这里暗黑模式就完成了入口配置剩下的就是进行颜色适配了。
创建两个颜色管理类 light_color.dart 、dark_color.dart
一个是正常模式下颜色、另一个便是暗黑模式颜色。
light_dart.dart 代码如下
import package:flutter/material.dart;class LightColor {///页面背景色static const Color back_ground_color Color(0xFFF5F5F5);///导航栏背景颜色static const Color color_nav_bar_bg Color(0xFFFFFFFF);///主要 分割线static const Color color_divider Color(0xFFEDEDED);/// 进度颜色static const Color color_progress Color(0xFFE6E7E9);/// 标题颜色static const Color color_title Color(0xFF323232);/// 副标题颜色static const Color color_sub_title Color(0xFF555555);/// 副标题颜色static const Color color_scontent Color(0xFF555555);/// 文本颜色static const Color color_text_77 Color(0xFF777777);/// 文本颜色static const Color color_text_99 Color(0xFF999999);/// loading背景色static const Color color_dialog_bg Color(0xFFE6E7E9);/// 文本颜色static const Color color_light_grey_text Color(0xFFE6E7E9);/// 文本输入框提示颜色static const Color color_text_hint Color(0xFFE6E7E9);///按钮背景色static const Color button_color Color(0xFFFFFFFF);///导航标题颜色static const Color nav_title_color Color(0xFFFFFFFF);///主题色static const Color theme_color Color(0xFFFD6F25);/// 红色static const Color red_color Color(0xFFFF3622);///蓝色static const Color blue_color Color(0xFF2268F2);///白色static const Color white_color Color(0xFFFFFFFF);/// 黑色static const Color black_color Color(0xFF000000);///绿色static const Color green_color Color(0xFF06C88C);///黄色static const Color yellow_color Color(0xFFF5A623);///灰色static const Color grey_color Colors.grey;
}dark_color.dart 代码如下
import package:flutter/material.dart;class DarkColor {///页面背景色static const Color back_ground_color Color(0xFF000000);///导航栏背景颜色static const Color color_nav_bar_bg Color(0xFF000000);///主要 分割线static const Color color_divider Color(0xFFF5F5F5);/// 进度颜色static const Color color_progress Color(0xFF323232);/// 标题颜色static const Color color_title Color(0xFFFFFFFF);/// 副标题颜色static const Color color_sub_title Color(0xFFDDDDDD);/// 副标题颜色static const Color color_scontent Color(0xFFDDDDDD);/// 文本颜色static const Color color_text_77 Color(0xFFBBBBBB);/// 文本颜色static const Color color_text_99 Color(0xFFAAAAAA);/// 文本颜色static const Color color_light_grey_text Color(0xFFDDDDDD);/// loading背景色static const Color color_dialog_bg Color(0xFFE6E7E9);/// 文本输入框提示颜色static const Color color_text_hint Color(0xFF555555);///蓝色static const Color button_color Color(0xFF555555);///导航标题颜色static const Color nav_title_color Color(0xFF323232);///主题色static const Color theme_color Color(0xFFFD6F25);/// 红色static const Color red_color Color(0xFFFF3622);///蓝色static const Color blue_color Color(0xFF2268F2);///白色static const Color white_color Color(0xFFFFFFFF);/// 黑色static const Color black_color Color(0xFF000000);///绿色static const Color green_color Color(0xFF06C88C);///黄色static const Color yellow_color Color(0xFFF5A623);///灰色static const Color grey_color Colors.grey;
}下面便是创建根据不同模式下自动获取对应的颜色类 color_util.dart。
color_util.dart 代码如下
import package:flutter/material.dart;
import package:get/get.dart;import dark_color.dart;
import light_color.dart;/// 颜色配置
class ColorUtil {/// 颜色keystatic const String main_bg_key main_bg;static const String title_key title;static const String sub_title_key sub_title;static const String content_key content;static const String content_77_key content_77;static const String content_99_key content_99;static const String button_bg_key button_bg;static const String button_title_key button_title;static const String divider_key divider;static const String red_key red;static const String blue_key blue;static const String white_key white;static const String black_key black;static const String green_key green;static const String yellow_key yellow;static const String color_dialog_key color_dialog;static const String color_theme_key color_theme;static const String grey_key color_grey;static const String nav_title_color_key nav_title_color;/// 颜色值static const _colors {main_bg_key: [LightColor.back_ground_color, DarkColor.back_ground_color],title_key: [LightColor.color_title, DarkColor.color_title],sub_title_key: [LightColor.color_sub_title, DarkColor.color_sub_title],content_key: [LightColor.color_scontent, DarkColor.color_scontent],content_77_key: [LightColor.color_text_77, DarkColor.color_text_77],content_99_key: [LightColor.color_text_99, DarkColor.color_text_99],button_bg_key: [LightColor.button_color, DarkColor.button_color],button_title_key: [LightColor.white_color, DarkColor.white_color],color_dialog_key: [LightColor.color_dialog_bg, DarkColor.color_dialog_bg],divider_key: [LightColor.color_divider, DarkColor.color_divider],color_theme_key: [LightColor.theme_color, DarkColor.theme_color],red_key: [LightColor.red_color, DarkColor.red_color],blue_key: [LightColor.blue_color, DarkColor.blue_color],white_key: [LightColor.white_color, DarkColor.white_color],black_key: [LightColor.black_color, DarkColor.black_color],green_key: [LightColor.green_color, DarkColor.green_color],yellow_key: [LightColor.yellow_color, DarkColor.yellow_color],grey_key: [LightColor.grey_color, DarkColor.grey_color],nav_title_color_key: [LightColor.nav_title_color, DarkColor.nav_title_color],};/// 取颜色值static Color getColor(String key) {final colors _colors[key];if (colors null) {return LightColor.color_title;}if (Get.isDarkMode true) {if (colors.length 2) {return colors[1];} else {return colors[0];}} else {return colors[0];}}
}下面这个类是为了方便我们使用创建的一个类 get_color.dart 。
可选择是否使用不是必须我这也把对应的代码放到下面
//对外调用
import package:flutter/material.dart;import color_util.dart;class GetColor {/// 主色static get mainBg ColorUtil.getColor(ColorUtil.main_bg_key);/// title 标题static get title ColorUtil.getColor(ColorUtil.title_key);/// subTitle 副标题static get subTitle ColorUtil.getColor(ColorUtil.sub_title_key);/// content 内容static get content ColorUtil.getColor(ColorUtil.content_key);/// buttonTitle 按钮标题static get content_77 ColorUtil.getColor(ColorUtil.content_77_key);/// 导航标题颜色static get nav_title_color ColorUtil.getColor(ColorUtil.nav_title_color_key);/// buttonTitle 按钮标题static get content_99 ColorUtil.getColor(ColorUtil.content_99_key);/// buttonBg 按钮背景static get buttonBg ColorUtil.getColor(ColorUtil.button_bg_key);/// buttonTitle 按钮标题static get buttonTitle ColorUtil.getColor(ColorUtil.button_title_key);/// 下滑线颜色static get divider ColorUtil.getColor(ColorUtil.divider_key);/// loading 背景色static get loadingBg ColorUtil.getColor(ColorUtil.color_dialog_key);/// loading 背景色static get theme ColorUtil.getColor(ColorUtil.color_theme_key);///常用颜色值/// 透明static const Color transparent Colors.transparent;static get red ColorUtil.getColor(ColorUtil.red_key);static get blue ColorUtil.getColor(ColorUtil.blue_key);static get white ColorUtil.getColor(ColorUtil.white_key);static get black ColorUtil.getColor(ColorUtil.black_key);static get green ColorUtil.getColor(ColorUtil.green_key);static get yellow ColorUtil.getColor(ColorUtil.yellow_key);static get grey ColorUtil.getColor(ColorUtil.grey_key);}到此颜色管理类相关内容就完成了。
接来下就是颜色管理类的使用了。
代码如下
Container(margin: EdgeInsets.only(left: m_all_12),alignment: Alignment.centerLeft,child: GlobalText(毫米波雷达, color: GetColor.white),)
下面我们进行主动设置暗黑模式的启动 get_theme.dart 类。
代码如下
import package:flutter/material.dart;
import package:get/get.dart;///主题色配置 统一配置
class GetTheme {/// 正常模式主题设置static ThemeData lightTheme ThemeData(brightness: Brightness.light);/// 黑暗模式主题设置static ThemeData darkTheme ThemeData(brightness: Brightness.dark);///设置黑暗模式static void changeThemeMode({ThemeMode themeMode ThemeMode.system}) {/// 主题类型Get.changeThemeMode(themeMode);Future.delayed(const Duration(milliseconds: 200), () Get.forceAppUpdate());/// 注意样式设置
// switch (themeMode) {
// case ThemeMode.system:
// if (Get.isDarkMode true) {
// Get.changeTheme(darkTheme);
// } else {
// Get.changeTheme(lightTheme);
// }
// break;
// case ThemeMode.dark:
// Get.changeTheme(darkTheme);
// break;
// case ThemeMode.light:
// Get.changeTheme(lightTheme);
// break;
// }}
}使用代码如下
/// 设置暗黑模式
GetTheme.changeThemeMode(ThemeMode.dark)
到此 GetX暗黑模式就完成了希望对大家有所帮助。
