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:
parent
a9d5d297d8
commit
770bcb85a2
|
|
@ -83,7 +83,7 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
|||
}
|
||||
|
||||
return Container(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: const Color(0x80FFFFFF),
|
||||
|
|
@ -159,14 +159,21 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
|||
);
|
||||
}
|
||||
|
||||
/// 每个火柴人需要的最小高度(标签+动画+昵称)
|
||||
static const double _minTrackHeight = 85.0;
|
||||
|
||||
/// 构建赛道区域
|
||||
Widget _buildRaceTrack() {
|
||||
// 按完成数量排序
|
||||
final sortedRankings = List<StickmanRankingData>.from(widget.rankings)
|
||||
..sort((a, b) => b.completedCount.compareTo(a.completedCount));
|
||||
|
||||
// 根据火柴人数量动态计算赛道高度
|
||||
final trackCount = sortedRankings.length;
|
||||
final raceTrackHeight = (trackCount * _minTrackHeight).clamp(160.0, 500.0);
|
||||
|
||||
return SizedBox(
|
||||
height: 160,
|
||||
height: raceTrackHeight,
|
||||
child: Stack(
|
||||
children: [
|
||||
// 背景赛道线
|
||||
|
|
@ -208,7 +215,7 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
|||
...sortedRankings.asMap().entries.map((entry) {
|
||||
final index = entry.key;
|
||||
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 trackHeight = 120.0 / total;
|
||||
// 预留顶部和底部空间
|
||||
final usableHeight = raceTrackHeight - 40;
|
||||
final trackHeight = usableHeight / total;
|
||||
final verticalPosition = rank * trackHeight + 10;
|
||||
|
||||
return AnimatedBuilder(
|
||||
|
|
|
|||
Loading…
Reference in New Issue