fix(mobile-app): 修复火柴人容器宽度与其他组件不一致
- 移除火柴人容器的水平margin,与页面其他内容保持一致 - 重新计算火柴人位置,正确处理容器边距 🤖 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
fd9df5d065
commit
63cf52b9c1
|
|
@ -82,7 +82,7 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
|||
}
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
margin: const EdgeInsets.only(bottom: 16),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0x80FFFFFF),
|
||||
|
|
@ -238,13 +238,14 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
|||
// 添加上下弹跳效果
|
||||
final bounce = _bounceController.value * 3;
|
||||
|
||||
// 计算可用宽度:容器宽度 - 左边距(20) - 右边距(终点区域80) - 火柴人宽度(60)
|
||||
final containerWidth = MediaQuery.of(context).size.width - 32; // 减去容器外边距
|
||||
final availableWidth = containerWidth - 20 - 80 - 60; // 起点边距 - 终点区域 - 火柴人宽度
|
||||
final leftPosition = 20 + availableWidth * horizontalProgress;
|
||||
// 计算可用宽度:屏幕宽度 - 页面padding(32) - 容器padding(32) - 终点区域(60) - 火柴人宽度(60)
|
||||
final screenWidth = MediaQuery.of(context).size.width;
|
||||
final containerWidth = screenWidth - 32 - 32; // 页面padding + 容器padding
|
||||
final availableWidth = containerWidth - 60 - 60; // 终点区域 - 火柴人宽度
|
||||
final leftPosition = availableWidth * horizontalProgress;
|
||||
|
||||
return Positioned(
|
||||
left: leftPosition.clamp(20.0, containerWidth - 80), // 确保不超出右边界
|
||||
left: leftPosition.clamp(0.0, availableWidth), // 确保不超出右边界
|
||||
top: verticalPosition - bounce,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
|
|
|
|||
Loading…
Reference in New Issue