fix(mobile): 修正火柴人100%进度时到达红旗位置的计算
- 精确计算终点位置:火柴人列右边缘对齐红旗左边缘 - 起点从昵称标签右边4px间距开始 🤖 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
c1c4a52ad3
commit
12c0c796f4
|
|
@ -234,17 +234,23 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
|||
// 添加上下弹跳效果
|
||||
final bounce = _bounceController.value * 3;
|
||||
|
||||
// 计算可用宽度:屏幕宽度 - 页面padding(32) - 容器padding(32) - 红旗区域(40)
|
||||
// 让火柴人在100%时正好到达红旗位置
|
||||
// 计算可用宽度,让火柴人在100%时正好到达红旗位置
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
final containerWidth = screenWidth - 32 - 32; // 页面padding + 容器padding
|
||||
final stickmanWidth = 60.0; // 火柴人+数量标签的宽度
|
||||
final flagAreaWidth = 40.0; // 红旗区域宽度
|
||||
final stickmanColumnWidth = 60.0; // 火柴人+数量标签列的宽度
|
||||
final flagRightMargin = 8.0; // 红旗的right值
|
||||
final flagWidth = 24.0; // 红旗图标宽度
|
||||
final nicknameAreaWidth = 65.0; // 昵称区域宽度
|
||||
final gap = 4.0; // 昵称和火柴人之间的最小间距
|
||||
// 火柴人可移动的范围:从昵称右边开始到红旗位置
|
||||
final availableWidth = containerWidth - nicknameAreaWidth - gap - stickmanWidth - flagAreaWidth;
|
||||
final stickmanLeftPosition = nicknameAreaWidth + gap + availableWidth * horizontalProgress;
|
||||
|
||||
// 100%时火柴人列的右边缘应该对齐红旗左边缘
|
||||
// 红旗左边位置 = containerWidth - flagRightMargin - flagWidth
|
||||
// 火柴人列右边 = stickmanLeftPosition + stickmanColumnWidth
|
||||
// 所以 100% 时: stickmanLeftPosition = containerWidth - flagRightMargin - flagWidth - stickmanColumnWidth
|
||||
final endPosition = containerWidth - flagRightMargin - flagWidth - stickmanColumnWidth;
|
||||
final startPosition = nicknameAreaWidth + gap;
|
||||
final availableWidth = endPosition - startPosition;
|
||||
final stickmanLeftPosition = startPosition + availableWidth * horizontalProgress;
|
||||
|
||||
return Positioned(
|
||||
left: 0,
|
||||
|
|
|
|||
Loading…
Reference in New Issue