Browse Source
- 创建 UnifiedAvatar 组件统一处理所有头像显示逻辑 - 在 ProfileController 中添加 isAvatarReady 状态防止闪烁 - 修改多个视图使用新的统一头像组件 - 优化头像加载流程，确保本地和远程头像一致性weicu
lxm
1 year ago
6 changed files with 272 additions and 155 deletions
@ -0,0 +1,137 @@ |
|||
import 'dart:io'; |
|||
import 'package:flutter/material.dart'; |
|||
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
|||
import 'package:get/get.dart'; |
|||
import '../controllers/profile_controller.dart'; |
|||
|
|||
/// 统一头像显示组件 |
|||
/// 确保所有页面的头像显示逻辑一致，避免闪烁问题 |
|||
class UnifiedAvatar extends StatelessWidget { |
|||
final double radius; |
|||
final Color? backgroundColor; |
|||
final Color? iconColor; |
|||
final double? iconSize; |
|||
final bool isDarkMode; |
|||
final VoidCallback? onTap; |
|||
|
|||
const UnifiedAvatar({ |
|||
super.key, |
|||
required this.radius, |
|||
this.backgroundColor, |
|||
this.iconColor, |
|||
this.iconSize, |
|||
this.isDarkMode = false, |
|||
this.onTap, |
|||
}); |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
final ProfileController profileCtrl = Get.find<ProfileController>(); |
|||
|
|||
return GestureDetector( |
|||
onTap: onTap, |
|||
child: Obx(() { |
|||
// 等待头像数据准备完成，避免闪烁 |
|||
if (!profileCtrl.isAvatarReady.value) { |
|||
return _buildLoadingAvatar(); |
|||
} |
|||
|
|||
return _buildAvatar(profileCtrl); |
|||
}), |
|||
); |
|||
} |
|||
|
|||
/// 构建加载中的头像占位符 |
|||
Widget _buildLoadingAvatar() { |
|||
return CircleAvatar( |
|||
radius: radius, |
|||
backgroundColor: |
|||
backgroundColor ?? (isDarkMode ? Colors.grey[800] : Colors.grey[200]), |
|||
child: Icon( |
|||
Icons.person, |
|||
size: iconSize ?? (radius * 0.6), |
|||
color: iconColor ?? (isDarkMode ? Colors.grey[400] : Colors.grey[600]), |
|||
), |
|||
); |
|||
} |
|||
|
|||
/// 构建实际头像 |
|||
Widget _buildAvatar(ProfileController profileCtrl) { |
|||
ImageProvider<Object>? imageProvider; |
|||
|
|||
// 统一头像显示优先级：本地头像 > 网络头像 > 默认图标 |
|||
if (profileCtrl.localAvatar.value.isNotEmpty) { |
|||
imageProvider = FileImage(File(profileCtrl.localAvatar.value)); |
|||
} else if (profileCtrl.userInfo.value.avatar.isNotEmpty) { |
|||
imageProvider = NetworkImage(profileCtrl.userInfo.value.avatar); |
|||
} |
|||
|
|||
return CircleAvatar( |
|||
radius: radius, |
|||
backgroundImage: imageProvider, |
|||
backgroundColor: |
|||
backgroundColor ?? (isDarkMode ? Colors.grey[800] : Colors.grey[200]), |
|||
child: (profileCtrl.localAvatar.value.isEmpty && |
|||
profileCtrl.userInfo.value.avatar.isEmpty) |
|||
? Icon( |
|||
Icons.person, |
|||
size: iconSize ?? (radius * 0.6), |
|||
color: iconColor ?? |
|||
(isDarkMode ? Colors.grey[400] : Colors.grey[600]), |
|||
) |
|||
: null, |
|||
); |
|||
} |
|||
} |
|||
|
|||
/// 带容器装饰的统一头像组件 |
|||
class UnifiedAvatarWithContainer extends StatelessWidget { |
|||
final double width; |
|||
final double height; |
|||
final double radius; |
|||
final Color? backgroundColor; |
|||
final Color? iconColor; |
|||
final double? iconSize; |
|||
final bool isDarkMode; |
|||
final VoidCallback? onTap; |
|||
final EdgeInsetsGeometry? margin; |
|||
final List<BoxShadow>? boxShadow; |
|||
|
|||
const UnifiedAvatarWithContainer({ |
|||
super.key, |
|||
required this.width, |
|||
required this.height, |
|||
required this.radius, |
|||
this.backgroundColor, |
|||
this.iconColor, |
|||
this.iconSize, |
|||
this.isDarkMode = false, |
|||
this.onTap, |
|||
this.margin, |
|||
this.boxShadow, |
|||
}); |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return Container( |
|||
width: width, |
|||
height: height, |
|||
margin: margin, |
|||
decoration: BoxDecoration( |
|||
borderRadius: BorderRadius.circular(radius), |
|||
boxShadow: boxShadow, |
|||
), |
|||
child: ClipRRect( |
|||
borderRadius: BorderRadius.circular(radius), |
|||
child: UnifiedAvatar( |
|||
radius: radius / 2, |
|||
backgroundColor: backgroundColor, |
|||
iconColor: iconColor, |
|||
iconSize: iconSize, |
|||
isDarkMode: isDarkMode, |
|||
onTap: onTap, |
|||
), |
|||
), |
|||
); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue