diff --git a/frontend/mobile-app/lib/features/authorization/presentation/widgets/stickman_race_widget.dart b/frontend/mobile-app/lib/features/authorization/presentation/widgets/stickman_race_widget.dart index 94c847ec..19bfb8f4 100644 --- a/frontend/mobile-app/lib/features/authorization/presentation/widgets/stickman_race_widget.dart +++ b/frontend/mobile-app/lib/features/authorization/presentation/widgets/stickman_race_widget.dart @@ -240,74 +240,89 @@ class _StickmanRaceWidgetState extends State final containerWidth = screenWidth - 32 - 32; // 页面padding + 容器padding final stickmanHalfWidth = 30.0; // 火柴人宽度的一半,用于居中对齐 final flagAreaWidth = 40.0; // 红旗区域宽度(红旗在right:8位置,图标24+边距) - final availableWidth = containerWidth - flagAreaWidth - stickmanHalfWidth; - final leftPosition = availableWidth * horizontalProgress; + final nicknameAreaWidth = 65.0; // 昵称区域宽度 + final availableWidth = containerWidth - flagAreaWidth - stickmanHalfWidth - nicknameAreaWidth; + final leftPosition = nicknameAreaWidth + availableWidth * horizontalProgress; return Positioned( - left: leftPosition.clamp(0.0, availableWidth), // 确保不超出右边界 + left: 0, top: verticalPosition - bounce, - child: Column( + child: Row( mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.center, children: [ - // 完成数量标签 - 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, + // 昵称标签 - 固定在左边 + SizedBox( + width: nicknameAreaWidth, + 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(4), + border: data.isCurrentUser + ? Border.all(color: const Color(0xFFD4AF37), width: 1) + : null, + ), child: Text( - '${_formatNumber(data.completedCount)}棵', - style: const TextStyle( + data.nickname, + style: TextStyle( fontSize: 9, fontFamily: 'Inter', - fontWeight: FontWeight.w600, - color: Colors.white, + 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), - - // 火柴人动画 - RunningStickman( - size: 36, - color: data.isCurrentUser - ? const Color(0xFFD4AF37) - : const Color(0xFF5D4037), - ), - - // 昵称标签 - Container( - constraints: const BoxConstraints(maxWidth: 60), - 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(4), - 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, + // 火柴人和数量标签 + SizedBox( + width: leftPosition - nicknameAreaWidth + stickmanHalfWidth * 2, + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Column( + mainAxisSize: MainAxisSize.min, + children: [ + // 完成数量标签 + 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, + ), + ), + ), + ), + // 火柴人动画 - 缩小与标签的间距 + RunningStickman( + size: 36, + color: data.isCurrentUser + ? const Color(0xFFD4AF37) + : const Color(0xFF5D4037), + ), + ], + ), + ], ), ), ],