hailin
/
rwadurian
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(mobile): 优化火柴人赛跑组件布局 

- 将昵称移到左侧固定位置，与右边红旗相呼应
- 缩小数量标签与动画之间的间距

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
hailin 2025-12-24 00:28:01 -08:00
parent bf64391c0c
commit 5ed1a0b143
1 changed files with 71 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
frontend/mobile-app/lib/features/authorization/presentation/widgets/stickman_race_widget.dart
View File

@ -240,74 +240,89 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
final containerWidth = screenWidth - 32 - 32; // 页面padding + 容器padding final containerWidth = screenWidth - 32 - 32; // 页面padding + 容器padding
final stickmanHalfWidth = 30.0; // 火柴人宽度的一半，用于居中对齐 final stickmanHalfWidth = 30.0; // 火柴人宽度的一半，用于居中对齐
final flagAreaWidth = 40.0; // 红旗区域宽度（红旗在right:8位置，图标24+边距） final flagAreaWidth = 40.0; // 红旗区域宽度（红旗在right:8位置，图标24+边距）
final availableWidth = containerWidth - flagAreaWidth - stickmanHalfWidth; final nicknameAreaWidth = 65.0; // 昵称区域宽度
final leftPosition = availableWidth * horizontalProgress; final availableWidth = containerWidth - flagAreaWidth - stickmanHalfWidth - nicknameAreaWidth;
final leftPosition = nicknameAreaWidth + availableWidth * horizontalProgress;
return Positioned( return Positioned(
left: leftPosition.clamp(0.0, availableWidth), // 确保不超出右边界 left: 0,
top: verticalPosition - bounce, top: verticalPosition - bounce,
child: Column( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
// 完成数量标签 // 昵称标签 - 固定在左边
Container( SizedBox(
constraints: const BoxConstraints(maxWidth: 60), width: nicknameAreaWidth,
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), child: Container(
decoration: BoxDecoration( padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
color: data.isCurrentUser decoration: BoxDecoration(
? const Color(0xFFD4AF37) color: data.isCurrentUser
: const Color(0xFF8B5A2B), ? const Color(0xFFD4AF37).withValues(alpha: 0.2)
borderRadius: BorderRadius.circular(8), : Colors.white.withValues(alpha: 0.8),
), borderRadius: BorderRadius.circular(4),
child: FittedBox( border: data.isCurrentUser
fit: BoxFit.scaleDown, ? Border.all(color: const Color(0xFFD4AF37), width: 1)
: null,
),
child: Text( child: Text(
'${_formatNumber(data.completedCount)}棵', data.nickname,
style: const TextStyle( style: TextStyle(
fontSize: 9, fontSize: 9,
fontFamily: 'Inter', fontFamily: 'Inter',
fontWeight: FontWeight.w600, fontWeight:
color: Colors.white, data.isCurrentUser ? FontWeight.w600 : FontWeight.w400,
color: data.isCurrentUser
? const Color(0xFFD4AF37)
: const Color(0xFF5D4037),
), ),
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
), ),
), ),
), ),
const SizedBox(height: 2), // 火柴人和数量标签
SizedBox(
// 火柴人动画 width: leftPosition - nicknameAreaWidth + stickmanHalfWidth * 2,
RunningStickman( child: Row(
size: 36, mainAxisAlignment: MainAxisAlignment.end,
color: data.isCurrentUser children: [
? const Color(0xFFD4AF37) Column(
: const Color(0xFF5D4037), mainAxisSize: MainAxisSize.min,
), children: [
// 完成数量标签
// 昵称标签 Container(
Container( constraints: const BoxConstraints(maxWidth: 60),
constraints: const BoxConstraints(maxWidth: 60), padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2), decoration: BoxDecoration(
decoration: BoxDecoration( color: data.isCurrentUser
color: data.isCurrentUser ? const Color(0xFFD4AF37)
? const Color(0xFFD4AF37).withValues(alpha: 0.2) : const Color(0xFF8B5A2B),
: Colors.white.withValues(alpha: 0.8), borderRadius: BorderRadius.circular(8),
borderRadius: BorderRadius.circular(4), ),
border: data.isCurrentUser child: FittedBox(
? Border.all(color: const Color(0xFFD4AF37), width: 1) fit: BoxFit.scaleDown,
: null, child: Text(
), '${_formatNumber(data.completedCount)}棵',
child: Text( style: const TextStyle(
data.nickname, fontSize: 9,
style: TextStyle( fontFamily: 'Inter',
fontSize: 9, fontWeight: FontWeight.w600,
fontFamily: 'Inter', color: Colors.white,
fontWeight: ),
data.isCurrentUser ? FontWeight.w600 : FontWeight.w400, ),
color: data.isCurrentUser ),
? const Color(0xFFD4AF37) ),
: const Color(0xFF5D4037), // 火柴人动画 - 缩小与标签的间距
), RunningStickman(
overflow: TextOverflow.ellipsis, size: 36,
textAlign: TextAlign.center, color: data.isCurrentUser
? const Color(0xFFD4AF37)
: const Color(0xFF5D4037),
),
],
),
],
), ),
), ),
], ],