liwei1dao
/
deepvoice_client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style(login): 优化暗黑模式下的UI样式 

- 调整登录视图的背景色、边框和阴影效果
- 优化隐私政策弹窗的暗黑模式适配
- 统一按钮样式和文字颜色
weicu
lxm 1 year ago
parent
c2ab7c8a1f
commit
5abda9b8f9
2 changed files with 82 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      lib/modules/login/controllers/login_controller.dart
  2. 54
      lib/modules/login/views/login_view.dart

55
lib/modules/login/controllers/login_controller.dart
View File

@ -201,6 +201,9 @@ class LoginController extends GetxController {
// 显示隐私政策弹窗 // 显示隐私政策弹窗
void _showPrivacyDialog() { void _showPrivacyDialog() {
// 获取当前主题模式
final bool isDarkMode = Get.theme.brightness == Brightness.dark;
Get.dialog( Get.dialog(
WillPopScope( WillPopScope(
onWillPop: () async => false, // 禁止通过返回键关闭弹窗 onWillPop: () async => false, // 禁止通过返回键关闭弹窗
@ -208,16 +211,20 @@ class LoginController extends GetxController {
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16), borderRadius: BorderRadius.circular(16),
), ),
backgroundColor:
isDarkMode ? Colors.grey[800] : Colors.white, // 暗黑模式使用深灰色背景
child: Container( child: Container(
padding: const EdgeInsets.all(20), padding: const EdgeInsets.all(20),
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
const Text( Text(
'DeapSound 声明', 'DeapSound 声明',
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 18,
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color:
isDarkMode ? Colors.white : Colors.black, // 暗黑模式使用白色文字
), ),
), ),
const SizedBox(height: 16), const SizedBox(height: 16),
@ -226,9 +233,14 @@ class LoginController extends GetxController {
child: Text.rich( child: Text.rich(
TextSpan( TextSpan(
children: [ children: [
const TextSpan( TextSpan(
text: '欢迎使用DeapSound，请充分阅读', text: '欢迎使用DeapSound，请充分阅读',
style: TextStyle(fontSize: 14), style: TextStyle(
fontSize: 14,
color: isDarkMode
? Colors.white70
: Colors.black87, // 暗黑模式使用浅白色
),
), ),
WidgetSpan( WidgetSpan(
alignment: PlaceholderAlignment.middle, alignment: PlaceholderAlignment.middle,
@ -244,18 +256,21 @@ class LoginController extends GetxController {
title: 'privacyPolicy'.tr, title: 'privacyPolicy'.tr,
)); ));
}, },
child: Text( child: const Text(
'《隐私政策》', '《隐私政策》',
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
color: const Color(0xFF3B82F6), color: Color(0xFF3B82F6),
), ),
), ),
), ),
), ),
const TextSpan( TextSpan(
text: '和', text: '和',
style: TextStyle(fontSize: 14), style: TextStyle(
fontSize: 14,
color: isDarkMode ? Colors.white70 : Colors.black87,
),
), ),
WidgetSpan( WidgetSpan(
alignment: PlaceholderAlignment.middle, alignment: PlaceholderAlignment.middle,
@ -271,18 +286,21 @@ class LoginController extends GetxController {
title: 'userAgreement'.tr, title: 'userAgreement'.tr,
)); ));
}, },
child: Text( child: const Text(
'《用户协议》', '《用户协议》',
style: TextStyle( style: TextStyle(
fontSize: 14, fontSize: 14,
color: const Color(0xFF3B82F6), color: Color(0xFF3B82F6),
), ),
), ),
), ),
), ),
const TextSpan( TextSpan(
text: '，点击“同意并进入”表示您已充分阅读并同意上述协议。点击“不同意”将退出应用。', text: '，点击“同意并进入”表示您已充分阅读并同意上述协议。点击“不同意”将退出应用。',
style: TextStyle(fontSize: 14), style: TextStyle(
fontSize: 14,
color: isDarkMode ? Colors.white70 : Colors.black87,
),
), ),
], ],
), ),
@ -299,9 +317,17 @@ class LoginController extends GetxController {
exit(0); exit(0);
}, },
style: TextButton.styleFrom( style: TextButton.styleFrom(
foregroundColor: Colors.black54, foregroundColor: isDarkMode
? Colors.grey[400]
: Colors.black54, // 暗黑模式使用浅灰色
),
child: Text(
'不同意',
style: TextStyle(
color: isDarkMode ? Colors.grey[400] : Colors.black54,
),
), ),
child: const Text('不同意'), //child: const Text('不同意'),
), ),
ElevatedButton( ElevatedButton(
onPressed: () { onPressed: () {
@ -317,6 +343,9 @@ class LoginController extends GetxController {
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
elevation: isDarkMode ? 4 : 2, // 暗黑模式下增加阴影效果提高辨识度
padding: const EdgeInsets.symmetric(
horizontal: 16, vertical: 10), // 统一的内边距
), ),
child: const Text('同意并进入'), child: const Text('同意并进入'),
), ),

54
lib/modules/login/views/login_view.dart
View File

@ -177,9 +177,23 @@ class LoginView extends GetView<LoginController> {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: isDarkMode color: isDarkMode
? Colors.grey[900]!.withOpacity(0.4) ? Colors.grey[850]!.withOpacity(0.6) // 更深的背景色，增加不透明度
: Colors.grey.withOpacity(0.1), : Colors.grey.withOpacity(0.1),
borderRadius: BorderRadius.circular(16.r), borderRadius: BorderRadius.circular(16.r),
border: Border.all(
color:
isDarkMode ? Colors.grey[700]! : Colors.transparent, // 暗黑模式添加边框
width: 1,
),
boxShadow: isDarkMode
? [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 4,
offset: const Offset(0, 2),
)
]
: [], // 暗黑模式添加阴影
), ),
child: Padding( child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 4.h), padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 4.h),
@ -213,32 +227,27 @@ class LoginView extends GetView<LoginController> {
Container( Container(
height: 20.h, height: 20.h,
width: 1, width: 1,
color: isDarkMode ? Colors.grey[800] : Colors.grey[300], color:
isDarkMode ? Colors.grey[600] : Colors.grey[300], // 调整分隔线颜色
margin: EdgeInsets.symmetric(horizontal: 8.w), margin: EdgeInsets.symmetric(horizontal: 8.w),
), ),
// Icon(
// Icons.person_outline,
// color: isDarkMode ? Colors.grey[400] : Colors.black54,
// size: 20.sp,
// ),
//SizedBox(width: 12.w),
Expanded( Expanded(
child: TextField( child: TextField(
controller: controller.contactController, controller: controller.contactController,
// keyboardType: controller.selectedCountryFlag == '✉️'
// ? TextInputType.emailAddress
// : TextInputType.phone,
decoration: InputDecoration( decoration: InputDecoration(
hintText: controller.selectedCountryFlag == '✉️' hintText: controller.selectedCountryFlag == '✉️'
? 'email'.tr // 需要在翻译文件中添加 ? 'email'.tr // 需要在翻译文件中添加
: 'phoneNumber'.tr, // 需要在翻译文件中添加 : 'phoneNumber'.tr, // 需要在翻译文件中添加
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: isDarkMode ? Colors.grey[600] : Colors.black38, color: isDarkMode
? Colors.grey[500]
: Colors.black38, // 调整提示文字颜色
), ),
border: InputBorder.none, border: InputBorder.none,
fillColor: Colors.transparent, fillColor: Colors.transparent,
filled: true, filled: true,
focusedBorder: InputBorder.none,
), ),
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
@ -322,9 +331,23 @@ class LoginView extends GetView<LoginController> {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: isDarkMode color: isDarkMode
? Colors.grey[900]!.withOpacity(0.4) ? Colors.grey[850]!.withOpacity(0.6) // 更深的背景色，增加不透明度
: Colors.grey.withOpacity(0.1), : Colors.grey.withOpacity(0.1),
borderRadius: BorderRadius.circular(16.r), borderRadius: BorderRadius.circular(16.r),
border: Border.all(
color:
isDarkMode ? Colors.grey[700]! : Colors.transparent, // 暗黑模式添加边框
width: 1,
),
boxShadow: isDarkMode
? [
BoxShadow(
color: Colors.black.withOpacity(0.2),
blurRadius: 4,
offset: const Offset(0, 2),
)
]
: [], // 暗黑模式添加阴影
), ),
child: Padding( child: Padding(
padding: EdgeInsets.only(left: 16.w, right: 4.w, top: 4.h, bottom: 4.h), padding: EdgeInsets.only(left: 16.w, right: 4.w, top: 4.h, bottom: 4.h),
@ -345,12 +368,15 @@ class LoginView extends GetView<LoginController> {
hintText: 'verificationCode'.tr, // 验证码 hintText: 'verificationCode'.tr, // 验证码
hintStyle: TextStyle( hintStyle: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,
color: isDarkMode ? Colors.grey[600] : Colors.black38, color: isDarkMode
? Colors.grey[500]
: Colors.black38, // 调整提示文字颜色
), ),
border: InputBorder.none, border: InputBorder.none,
counterText: '', counterText: '',
fillColor: Colors.transparent, fillColor: Colors.transparent,
filled: true, filled: true,
focusedBorder: InputBorder.none,
), ),
style: TextStyle( style: TextStyle(
fontSize: 14.sp, fontSize: 14.sp,

Write Preview
Loading…
Cancel
Save