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

fix(mobile-app): 修复火柴人组件宽度和行间隔问题 

1. 将水平边距从16改为20，与其他组件一致
2. 根据火柴人数量动态计算赛道高度，每个火柴人85px
3. 避免火柴人数量标签覆盖到其他火柴人

🤖 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-23 01:10:38 -08:00
parent a9d5d297d8
commit 770bcb85a2
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -83,7 +83,7 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
} }
return Container( return Container(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0x80FFFFFF), color: const Color(0x80FFFFFF),
@ -159,14 +159,21 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
); );
} }
/// 每个火柴人需要的最小高度（标签+动画+昵称）
static const double _minTrackHeight = 85.0;
/// 构建赛道区域 /// 构建赛道区域
Widget _buildRaceTrack() { Widget _buildRaceTrack() {
// 按完成数量排序 // 按完成数量排序
final sortedRankings = List<StickmanRankingData>.from(widget.rankings) final sortedRankings = List<StickmanRankingData>.from(widget.rankings)
..sort((a, b) => b.completedCount.compareTo(a.completedCount)); ..sort((a, b) => b.completedCount.compareTo(a.completedCount));
// 根据火柴人数量动态计算赛道高度
final trackCount = sortedRankings.length;
final raceTrackHeight = (trackCount * _minTrackHeight).clamp(160.0, 500.0);
return SizedBox( return SizedBox(
height: 160, height: raceTrackHeight,
child: Stack( child: Stack(
children: [ children: [
// 背景赛道线 // 背景赛道线
@ -208,7 +215,7 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
...sortedRankings.asMap().entries.map((entry) { ...sortedRankings.asMap().entries.map((entry) {
final index = entry.key; final index = entry.key;
final data = entry.value; final data = entry.value;
return _buildStickman(data, index, sortedRankings.length); return _buildStickman(data, index, sortedRankings.length, raceTrackHeight);
}), }),
], ],
), ),
@ -216,12 +223,14 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
} }
/// 构建单个火柴人 /// 构建单个火柴人
Widget _buildStickman(StickmanRankingData data, int rank, int total) { Widget _buildStickman(StickmanRankingData data, int rank, int total, double raceTrackHeight) {
// 计算水平位置 (根据进度) // 计算水平位置 (根据进度)
final horizontalProgress = data.progress; final horizontalProgress = data.progress;
// 计算垂直位置 (不同排名在不同跑道) // 计算垂直位置 (不同排名在不同跑道)
final trackHeight = 120.0 / total; // 预留顶部和底部空间
final usableHeight = raceTrackHeight - 40;
final trackHeight = usableHeight / total;
final verticalPosition = rank * trackHeight + 10; final verticalPosition = rank * trackHeight + 10;
return AnimatedBuilder( return AnimatedBuilder(