fix(mobile): 修复火柴人组件布局错误，避免嵌套Stack
🤖 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
0623169d19
commit
27bee6d7f1
|
|
@ -188,47 +188,55 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
||||||
builder: (context, constraints) {
|
builder: (context, constraints) {
|
||||||
final containerWidth = constraints.maxWidth;
|
final containerWidth = constraints.maxWidth;
|
||||||
|
|
||||||
return Stack(
|
// 收集所有 Positioned widgets
|
||||||
clipBehavior: Clip.none,
|
final List<Widget> children = [
|
||||||
children: [
|
// 背景赛道线
|
||||||
// 背景赛道线
|
Positioned.fill(
|
||||||
Positioned.fill(
|
child: CustomPaint(
|
||||||
child: CustomPaint(
|
painter: _TrackPainter(
|
||||||
painter: _TrackPainter(
|
trackCount: sortedRankings.length,
|
||||||
trackCount: sortedRankings.length,
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
// 每个跑道的终点红旗
|
// 添加每个跑道的终点红旗
|
||||||
...List.generate(trackCount, (index) {
|
for (int index = 0; index < trackCount; index++) {
|
||||||
final verticalPosition = index * trackHeight + 10 + trackHeight / 2 - 16;
|
final verticalPosition = index * trackHeight + 10 + trackHeight / 2 - 16;
|
||||||
return Positioned(
|
children.add(Positioned(
|
||||||
right: 8,
|
right: 8,
|
||||||
top: verticalPosition,
|
top: verticalPosition,
|
||||||
child: const Icon(
|
child: const Icon(
|
||||||
Icons.flag,
|
Icons.flag,
|
||||||
color: Colors.red,
|
color: Colors.red,
|
||||||
size: 24,
|
size: 24,
|
||||||
),
|
),
|
||||||
);
|
));
|
||||||
}),
|
}
|
||||||
|
|
||||||
// 火柴人们
|
// 添加火柴人们（昵称和火柴人分开添加）
|
||||||
...sortedRankings.asMap().entries.map((entry) {
|
for (int index = 0; index < sortedRankings.length; index++) {
|
||||||
final index = entry.key;
|
final data = sortedRankings[index];
|
||||||
final data = entry.value;
|
final widgets = _buildStickmanWidgets(data, index, sortedRankings.length, raceTrackHeight, containerWidth);
|
||||||
return _buildStickman(data, index, sortedRankings.length, raceTrackHeight, containerWidth);
|
children.addAll(widgets);
|
||||||
}),
|
}
|
||||||
],
|
|
||||||
|
return AnimatedBuilder(
|
||||||
|
animation: _bounceController,
|
||||||
|
builder: (context, child) {
|
||||||
|
return Stack(
|
||||||
|
clipBehavior: Clip.none,
|
||||||
|
children: children,
|
||||||
|
);
|
||||||
|
},
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 构建单个火柴人
|
/// 构建单个火柴人的所有 Positioned widgets
|
||||||
Widget _buildStickman(StickmanRankingData data, int rank, int total, double raceTrackHeight, double containerWidth) {
|
List<Widget> _buildStickmanWidgets(StickmanRankingData data, int rank, int total, double raceTrackHeight, double containerWidth) {
|
||||||
// 进度 (0.0 - 1.0)
|
// 进度 (0.0 - 1.0)
|
||||||
final progress = data.progress;
|
final progress = data.progress;
|
||||||
|
|
||||||
|
|
@ -237,100 +245,91 @@ class _StickmanRaceWidgetState extends State<StickmanRaceWidget>
|
||||||
final trackHeight = usableHeight / total;
|
final trackHeight = usableHeight / total;
|
||||||
final verticalPosition = rank * trackHeight + 10;
|
final verticalPosition = rank * trackHeight + 10;
|
||||||
|
|
||||||
// 火柴人列宽度约50（数量标签maxWidth:60，但实际更窄）
|
// 简单计算:
|
||||||
// 红旗: right=8, width=24, 所以红旗左边 = containerWidth - 32
|
// 起点 = 70 (昵称区域右边)
|
||||||
// 火柴人停在红旗左边时: stickmanLeft + 50 = containerWidth - 32
|
// 终点 = 红旗左边位置 - 火柴人宽度 = (containerWidth - 32) - 50 = containerWidth - 82
|
||||||
// 所以 endX = containerWidth - 82
|
|
||||||
const double startX = 70.0;
|
const double startX = 70.0;
|
||||||
final double endX = containerWidth - 82.0;
|
final double endX = containerWidth - 82.0;
|
||||||
final double stickmanLeft = startX + (endX - startX) * progress;
|
final double stickmanLeft = startX + (endX - startX) * progress;
|
||||||
|
|
||||||
return AnimatedBuilder(
|
final bounce = _bounceController.value * 3;
|
||||||
animation: _bounceController,
|
|
||||||
builder: (context, child) {
|
|
||||||
final bounce = _bounceController.value * 3;
|
|
||||||
|
|
||||||
return Stack(
|
return [
|
||||||
clipBehavior: Clip.none,
|
// 昵称标签 - 固定在左边
|
||||||
|
Positioned(
|
||||||
|
left: 0,
|
||||||
|
top: verticalPosition + 15 - bounce,
|
||||||
|
child: SizedBox(
|
||||||
|
width: 65,
|
||||||
|
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(8),
|
||||||
|
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,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 火柴人和数量标签
|
||||||
|
Positioned(
|
||||||
|
left: stickmanLeft,
|
||||||
|
top: verticalPosition - bounce,
|
||||||
|
child: Column(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: [
|
children: [
|
||||||
// 昵称标签 - 固定在左边
|
// 完成数量标签
|
||||||
Positioned(
|
Container(
|
||||||
left: 0,
|
constraints: const BoxConstraints(maxWidth: 60),
|
||||||
top: verticalPosition + 15 - bounce,
|
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
||||||
child: SizedBox(
|
decoration: BoxDecoration(
|
||||||
width: 65,
|
color: data.isCurrentUser
|
||||||
child: Container(
|
? const Color(0xFFD4AF37)
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
|
: const Color(0xFF8B5A2B),
|
||||||
decoration: BoxDecoration(
|
borderRadius: BorderRadius.circular(8),
|
||||||
color: data.isCurrentUser
|
),
|
||||||
? const Color(0xFFD4AF37).withValues(alpha: 0.2)
|
child: FittedBox(
|
||||||
: Colors.white.withValues(alpha: 0.8),
|
fit: BoxFit.scaleDown,
|
||||||
borderRadius: BorderRadius.circular(8),
|
child: Text(
|
||||||
border: data.isCurrentUser
|
'${_formatNumber(data.completedCount)}棵',
|
||||||
? Border.all(color: const Color(0xFFD4AF37), width: 1)
|
style: const TextStyle(
|
||||||
: null,
|
fontSize: 9,
|
||||||
),
|
fontFamily: 'Inter',
|
||||||
child: Text(
|
fontWeight: FontWeight.w600,
|
||||||
data.nickname,
|
color: Colors.white,
|
||||||
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,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// 火柴人和数量标签
|
const SizedBox(height: 2),
|
||||||
Positioned(
|
// 火柴人动画
|
||||||
left: stickmanLeft,
|
RunningStickman(
|
||||||
top: verticalPosition - bounce,
|
size: 36,
|
||||||
child: Column(
|
color: data.isCurrentUser
|
||||||
mainAxisSize: MainAxisSize.min,
|
? const Color(0xFFD4AF37)
|
||||||
children: [
|
: const Color(0xFF5D4037),
|
||||||
// 完成数量标签
|
|
||||||
Container(
|
|
||||||
constraints: const BoxConstraints(maxWidth: 60),
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
color: data.isCurrentUser
|
|
||||||
? const Color(0xFFD4AF37)
|
|
||||||
: const Color(0xFF8B5A2B),
|
|
||||||
borderRadius: BorderRadius.circular(8),
|
|
||||||
),
|
|
||||||
child: FittedBox(
|
|
||||||
fit: BoxFit.scaleDown,
|
|
||||||
child: Text(
|
|
||||||
'${_formatNumber(data.completedCount)}棵',
|
|
||||||
style: const TextStyle(
|
|
||||||
fontSize: 9,
|
|
||||||
fontFamily: 'Inter',
|
|
||||||
fontWeight: FontWeight.w600,
|
|
||||||
color: Colors.white,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(height: 2),
|
|
||||||
// 火柴人动画
|
|
||||||
RunningStickman(
|
|
||||||
size: 36,
|
|
||||||
color: data.isCurrentUser
|
|
||||||
? const Color(0xFFD4AF37)
|
|
||||||
: const Color(0xFF5D4037),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
);
|
),
|
||||||
},
|
),
|
||||||
);
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 构建进度条
|
/// 构建进度条
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue