fix(mobile): 修复SVG头像渲染导致的布局问题
- 使用RepaintBoundary隔离SVG渲染 - 添加placeholderBuilder防止加载时闪烁 - 确保SizedBox固定尺寸约束 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
a38727eb7f
commit
ba3e96c606
|
|
@ -482,11 +482,23 @@ class _EditProfilePageState extends ConsumerState<EditProfilePage> {
|
|||
/// 构建SVG或默认头像
|
||||
Widget _buildSvgOrDefaultAvatar() {
|
||||
if (_avatarSvg != null) {
|
||||
return SvgPicture.string(
|
||||
_avatarSvg!,
|
||||
width: 128,
|
||||
height: 128,
|
||||
fit: BoxFit.cover,
|
||||
// 使用 SizedBox + RepaintBoundary 包装确保固定尺寸并隔离渲染,避免布局问题
|
||||
return RepaintBoundary(
|
||||
child: SizedBox(
|
||||
width: 128,
|
||||
height: 128,
|
||||
child: SvgPicture.string(
|
||||
_avatarSvg!,
|
||||
width: 128,
|
||||
height: 128,
|
||||
fit: BoxFit.cover,
|
||||
placeholderBuilder: (context) => const Icon(
|
||||
Icons.person,
|
||||
size: 64,
|
||||
color: Color(0xFF8B5A2B),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return const Icon(
|
||||
|
|
|
|||
|
|
@ -1665,11 +1665,23 @@ class _ProfilePageState extends ConsumerState<ProfilePage> {
|
|||
// 检测是否是 SVG 字符串(随机生成的 SVG 头像)
|
||||
if (_avatarSvg!.contains('<svg') || _avatarSvg!.startsWith('<?xml')) {
|
||||
debugPrint('[ProfilePage] _buildSvgOrDefaultAvatar() - 检测到是SVG字符串,使用SvgPicture');
|
||||
return SvgPicture.string(
|
||||
_avatarSvg!,
|
||||
width: 80,
|
||||
height: 80,
|
||||
fit: BoxFit.cover,
|
||||
// 使用 SizedBox + RepaintBoundary 包装确保固定尺寸并隔离渲染,避免布局问题
|
||||
return RepaintBoundary(
|
||||
child: SizedBox(
|
||||
width: 80,
|
||||
height: 80,
|
||||
child: SvgPicture.string(
|
||||
_avatarSvg!,
|
||||
width: 80,
|
||||
height: 80,
|
||||
fit: BoxFit.cover,
|
||||
placeholderBuilder: (context) => const Icon(
|
||||
Icons.person,
|
||||
size: 40,
|
||||
color: Color(0xFF8B5A2B),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue