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

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

@ -240,13 +240,54 @@ 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,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// 昵称标签 - 固定在左边
SizedBox(
width: nicknameAreaWidth,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: BoxDecoration(
color: data.isCurrentUser
? const Color(0xFFD4AF37).withValues(alpha: 0.2)
: Colors.white.withValues(alpha: 0.8),
borderRadius: BorderRadius.circular(4),
border: data.isCurrentUser
? Border.all(color: const Color(0xFFD4AF37), width: 1)
: null,
),
child: Text(
data.nickname,
style: TextStyle(
fontSize: 9,
fontFamily: 'Inter',
fontWeight:
data.isCurrentUser ? FontWeight.w600 : FontWeight.w400,
color: data.isCurrentUser
? const Color(0xFFD4AF37)
: const Color(0xFF5D4037),
),
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
),
),
// 火柴人和数量标签
SizedBox(
width: leftPosition - nicknameAreaWidth + stickmanHalfWidth * 2,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
// 完成数量标签 // 完成数量标签
@ -272,42 +313,16 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
), ),
), ),
), ),
const SizedBox(height: 2), // 火柴人动画 - 缩小与标签的间距
// 火柴人动画
RunningStickman( RunningStickman(
size: 36, size: 36,
color: data.isCurrentUser color: data.isCurrentUser
? const Color(0xFFD4AF37) ? const Color(0xFFD4AF37)
: const Color(0xFF5D4037), : const Color(0xFF5D4037),
), ),
],
// 昵称标签
Container(
constraints: const BoxConstraints(maxWidth: 60),
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: BoxDecoration(
color: data.isCurrentUser
? const Color(0xFFD4AF37).withValues(alpha: 0.2)
: Colors.white.withValues(alpha: 0.8),
borderRadius: BorderRadius.circular(4),
border: data.isCurrentUser
? Border.all(color: const Color(0xFFD4AF37), width: 1)
: null,
), ),
child: Text( ],
data.nickname,
style: TextStyle(
fontSize: 9,
fontFamily: 'Inter',
fontWeight:
data.isCurrentUser ? FontWeight.w600 : FontWeight.w400,
color: data.isCurrentUser
? const Color(0xFFD4AF37)
: const Color(0xFF5D4037),
),
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
), ),
), ),
], ],