[fix]亲密度分析，步骤卡片，增加多种背景

lib/data/bean/widget_location.dart

@@ -0,0 +1,26 @@
+import 'package:json_annotation/json_annotation.dart';
+
+part 'widget_location.g.dart';
+
+/// 组件位置西悉尼
+@JsonSerializable()
+class WidgetLocation {
+  @JsonKey(name: 'left')
+  final double? left;
+
+  @JsonKey(name: 'top')
+  final double? top;
+
+  @JsonKey(name: 'right')
+  final double? right;
+
+  @JsonKey(name: 'bottom')
+  final double? bottom;
+
+  WidgetLocation(this.left, this.top, this.right, this.bottom);
+
+  Map<String, dynamic> toJson() => _$WidgetLocationToJson(this);
+
+  factory WidgetLocation.fromJson(Map<String, dynamic> json) =>
+      _$WidgetLocationFromJson(json);
+}

lib/data/bean/widget_location.g.dart

@@ -0,0 +1,23 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'widget_location.dart';
+
+// **************************************************************************
+// JsonSerializableGenerator
+// **************************************************************************
+
+WidgetLocation _$WidgetLocationFromJson(Map<String, dynamic> json) =>
+    WidgetLocation(
+      (json['left'] as num?)?.toDouble(),
+      (json['top'] as num?)?.toDouble(),
+      (json['right'] as num?)?.toDouble(),
+      (json['bottom'] as num?)?.toDouble(),
+    );
+
+Map<String, dynamic> _$WidgetLocationToJson(WidgetLocation instance) =>
+    <String, dynamic>{
+      'left': instance.left,
+      'top': instance.top,
+      'right': instance.right,
+      'bottom': instance.bottom,
+    };

lib/module/intimacy_analyse/intimacy_analyse_upload/intimacy_analyse_upload_page.dart

@@ -14,6 +14,7 @@ import 'package:wechat_assets_picker/wechat_assets_picker.dart';
 import '../../../resource/assets.gen.dart';
 import '../../../router/app_page_arguments.dart';
 import '../../../router/app_pages.dart';
+import '../../../utils/step_card_util.dart';
 import '../../../utils/string_format_util.dart';
 import '../../../widget/actionbtn/action_btn.dart';
 import '../../../widget/gradient_btn.dart';
@@ -218,7 +219,9 @@ class IntimacyAnalyseUploadPage
   Widget _buildAnalysisResultCard() {
     return Obx(() {
       return StepCard(
-        bgImageProvider: Assets.images.bgIntimacyAnalyseUploadCard.provider(),
+        bgImageProvider: StepCardUtil.getCardBgImageProvider(
+          controller.uploadInfoList.length,
+        ),
         topTitleWidget: StepTitleWidget(
           stepTitle: StringName.intimacyAnalyseAnalysisResult,
         ),
@@ -226,6 +229,10 @@ class IntimacyAnalyseUploadPage
           height: 63.h,
           width: 103.w,
         ),
+        // 顶部图标的位置
+        topIconWidgetLocation: StepCardUtil.calculateTopIconWidgetLocation(
+          controller.uploadInfoList.length,
+        ),
         contentWidget: Column(
           children: [
             // 图片九宫格

lib/module/intimacy_analyse/intimacy_analyse_upload/widget/upload_nine_grid.dart

@@ -53,7 +53,10 @@ class UploadNineGrid extends StatelessWidget {
     return Container(
       constraints: BoxConstraints(
         // 最小高度
-        minHeight: 200.h,
+        // 最少1行
+        minHeight: 90.h,
+        // 最少2行
+        // minHeight: 180.h,
       ),
       child: GridView.builder(
         // 去掉默认的Padding，默认会有一个默认的顶部padding大小

lib/module/intimacy_analyse/screenshot_reply/conversation_analysis/conversation_analysis_view.dart

@@ -9,6 +9,7 @@ import '../../../../data/bean/option_select_item.dart';
 import '../../../../resource/assets.gen.dart';
 import '../../../../resource/colors.gen.dart';
 import '../../../../resource/string.gen.dart';
+import '../../../../utils/step_card_util.dart';
 import '../../../../widget/gradient_btn.dart';
 import '../../intimacy_analyse_upload/widget/upload_nine_grid.dart';
 import '../../widget/option_select_widget.dart';
@@ -186,7 +187,9 @@ class ConversationAnalysisView
   Widget _buildAnalysisResultCard() {
     return Obx(() {
       return StepCard(
-        bgImageProvider: Assets.images.bgIntimacyAnalyseUploadCard.provider(),
+        bgImageProvider: StepCardUtil.getCardBgImageProvider(
+          controller.uploadInfoList.length,
+        ),
         topTitleWidget: StepTitleWidget(
           stepTitle: StringName.intimacyAnalyseAnalysisResult,
         ),
@@ -194,6 +197,10 @@ class ConversationAnalysisView
           height: 63.h,
           width: 103.w,
         ),
+        // 顶部图标的位置
+        topIconWidgetLocation: StepCardUtil.calculateTopIconWidgetLocation(
+          controller.uploadInfoList.length,
+        ),
         contentWidget: Column(
           children: [
             // 图片九宫格
@@ -311,7 +318,9 @@ class ConversationAnalysisView
   /// 上传截图例子卡片
   Widget _buildChatRecordSampleCard() {
     return StepCard(
-      bgImageProvider: Assets.images.bgIntimacyAnalyseUploadCard.provider(),
+      bgImageProvider: StepCardUtil.getCardBgImageProvider(
+        controller.uploadInfoList.length,
+      ),
       topTitleWidget: StepTitleWidget(
         stepTitle: StringName.intimacyConversationAnalysis,
         stepDesc: StringName.intimacyConversationAnalysisCardTip,
@@ -320,6 +329,10 @@ class ConversationAnalysisView
         height: 63.h,
         width: 103.w,
       ),
+      // 顶部图标的位置
+      topIconWidgetLocation: StepCardUtil.calculateTopIconWidgetLocation(
+        controller.uploadInfoList.length,
+      ),
       contentWidget: Column(
         children: [
           Container(

lib/module/intimacy_analyse/screenshot_reply/scan_image_reply/scan_image_reply_view.dart

@@ -11,6 +11,7 @@ import '../../../../resource/assets.gen.dart';
 import '../../../../resource/colors.gen.dart';
 import '../../../../resource/string.gen.dart';
 import '../../../../utils/prefix_util.dart';
+import '../../../../utils/step_card_util.dart';
 import '../../../../utils/upload/file_data_source_util.dart';
 import '../../../../widget/actionbtn/action_btn.dart';
 import '../../../../widget/gradient_btn.dart';
@@ -187,8 +188,10 @@ class ScanImageReplyView extends BaseView<ScanImageReplyController> {
       );
     }
 
+    // 识图回复，只有1张图
+    int uploadItemCount = 1;
     return StepCard(
-      bgImageProvider: Assets.images.bgIntimacyAnalyseUploadCard.provider(),
+      bgImageProvider: StepCardUtil.getCardBgImageProvider(uploadItemCount),
       topTitleWidget: StepTitleWidget(
         stepTitle: StringName.intimacyUploadScreenshot,
         stepDesc: StringName.intimacyAnalyseUploadScreenshotCardTip,
@@ -197,6 +200,10 @@ class ScanImageReplyView extends BaseView<ScanImageReplyController> {
         height: 63.h,
         width: 103.w,
       ),
+      // 顶部图标的位置
+      topIconWidgetLocation: StepCardUtil.calculateTopIconWidgetLocation(
+        uploadItemCount,
+      ),
       contentWidget: Column(
         children: [
           Container(

lib/module/intimacy_analyse/widget/step/upload_step_card.dart

@@ -4,6 +4,7 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
 import '../../../../data/bean/upload_info.dart';
 import '../../../../resource/assets.gen.dart';
 import '../../../../resource/colors.gen.dart';
+import '../../../../utils/step_card_util.dart';
 import '../../intimacy_analyse_upload/widget/upload_add_widget.dart';
 import '../../intimacy_analyse_upload/widget/upload_item_widget.dart';
 import '../../intimacy_analyse_upload/widget/upload_nine_grid.dart';
@@ -39,7 +40,9 @@ class UploadStepCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return StepCard(
       // 背景图片
-      bgImageProvider: Assets.images.bgIntimacyAnalyseUploadCard.provider(),
+      bgImageProvider: StepCardUtil.getCardBgImageProvider(
+        imageUploadInfoList.length,
+      ),
       // 顶部的标题
       topTitleWidget: topTitleWidget,
       // 顶部的图标
@@ -47,6 +50,10 @@ class UploadStepCard extends StatelessWidget {
         height: 63.h,
         width: 103.w,
       ),
+      // 顶部图标的位置
+      topIconWidgetLocation: StepCardUtil.calculateTopIconWidgetLocation(
+        imageUploadInfoList.length,
+      ),
       contentWidget: Column(
         children: [
           SizedBox(height: 14.h),

lib/module/intimacy_analyse/widget/step_card.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/cupertino.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
+import '../../../data/bean/widget_location.dart';
 import '../../../resource/colors.gen.dart';
 import '../../../widget/gradient_text.dart';
 import '../intimacy_analyse_upload/widget/step_label_widget.dart';
@@ -18,16 +19,22 @@ class StepCard extends StatelessWidget {
   /// 内容组件
   final Widget contentWidget;
 
+  /// 顶部图标组件的位置信息
+  final WidgetLocation? topIconWidgetLocation;
+
   const StepCard({
     super.key,
     required this.bgImageProvider,
     this.topTitleWidget,
     required this.contentWidget,
     this.topIconWidget,
+    this.topIconWidgetLocation,
   });
 
   @override
   Widget build(BuildContext context) {
+    var topIconWidgetLocation =
+        this.topIconWidgetLocation ?? WidgetLocation(null, -11.h, 0, null);
     return Container(
       margin: EdgeInsets.only(left: 12.w, top: 10.h, right: 12.w),
       child: Stack(
@@ -37,7 +44,13 @@ class StepCard extends StatelessWidget {
           // 顶部的图标
           topIconWidget == null
               ? SizedBox()
-              : Positioned(top: -11.h, right: 0, child: topIconWidget!),
+              : Positioned(
+                left: topIconWidgetLocation.left,
+                top: topIconWidgetLocation.top,
+                right: topIconWidgetLocation.right,
+                bottom: topIconWidgetLocation.bottom,
+                child: topIconWidget!,
+              ),
           // 卡片背景
           Container(
             // 渐变背景
@@ -55,6 +68,9 @@ class StepCard extends StatelessWidget {
             decoration: BoxDecoration(
               image: DecorationImage(image: bgImageProvider, fit: BoxFit.fill),
             ),
+            constraints: BoxConstraints(
+                minHeight: 260.h
+            ),
             child: Column(
               // 左对齐
               crossAxisAlignment: CrossAxisAlignment.start,

lib/resource/assets.gen.dart

@@ -176,6 +176,16 @@ class $AssetsImagesGen {
   AssetGenImage get bgIntimacyAnalyseUploadCard =>
       const AssetGenImage('assets/images/bg_intimacy_analyse_upload_card.webp');
 
+  /// File path: assets/images/bg_intimacy_analyse_upload_card2.webp
+  AssetGenImage get bgIntimacyAnalyseUploadCard2 => const AssetGenImage(
+    'assets/images/bg_intimacy_analyse_upload_card2.webp',
+  );
+
+  /// File path: assets/images/bg_intimacy_analyse_upload_card3.webp
+  AssetGenImage get bgIntimacyAnalyseUploadCard3 => const AssetGenImage(
+    'assets/images/bg_intimacy_analyse_upload_card3.webp',
+  );
+
   /// File path: assets/images/bg_intimacy_analyse_user_name.webp
   AssetGenImage get bgIntimacyAnalyseUserName =>
       const AssetGenImage('assets/images/bg_intimacy_analyse_user_name.webp');
@@ -1230,6 +1240,8 @@ class $AssetsImagesGen {
     bgIntimacyAnalyseReportPreviewBubble,
     bgIntimacyAnalyseReportPreviewMask,
     bgIntimacyAnalyseUploadCard,
+    bgIntimacyAnalyseUploadCard2,
+    bgIntimacyAnalyseUploadCard3,
     bgIntimacyAnalyseUserName,
     bgIntro,
     bgKeyboard,

lib/utils/grid_util.dart

@@ -0,0 +1,11 @@
+/// 网格工具类
+class GridUtil {
+  GridUtil._();
+
+  /// 计算当前上传的图片，有多少行
+  /// [itemCount] 当前上传的图片数量
+  /// [crossAxisCount] 一列多少个
+  static int calculateRowCount(int itemCount, int crossAxisCount) {
+    return (itemCount + crossAxisCount - 1) ~/ crossAxisCount;
+  }
+}

lib/utils/step_card_util.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/cupertino.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:keyboard/utils/grid_util.dart';
+
+import '../data/bean/widget_location.dart';
+import '../resource/assets.gen.dart';
+
+/// 步骤卡片工具类
+class StepCardUtil {
+  StepCardUtil._();
+
+  /// 一列多少个
+  static const int defaultCrossAxisCount = 3;
+
+  /// 获取卡片背景图片
+  static ImageProvider getCardBgImageProvider(
+    int itemCount, {
+    int crossAxisCount = defaultCrossAxisCount,
+  }) {
+    // 计算出九宫格有多少行
+    int rowCount = GridUtil.calculateRowCount(itemCount, crossAxisCount);
+    // 根据行数不同，使用不同的步骤卡片背景
+    if (rowCount == 1) {
+      return Assets.images.bgIntimacyAnalyseUploadCard.provider();
+    } else if (rowCount == 2) {
+      return Assets.images.bgIntimacyAnalyseUploadCard2.provider();
+    } else {
+      return Assets.images.bgIntimacyAnalyseUploadCard3.provider();
+    }
+  }
+
+  /// 计算顶部Icon的位置
+  static WidgetLocation calculateTopIconWidgetLocation(
+    int itemCount, {
+    int crossAxisCount = defaultCrossAxisCount,
+  }) {
+    // 计算出九宫格有多少行
+    int rowCount = GridUtil.calculateRowCount(itemCount, crossAxisCount);
+    if (rowCount == 1) {
+      return WidgetLocation(null, -8.h, 0, null);
+    } else if (rowCount == 2) {
+      return WidgetLocation(null, -5.h, 0, null);
+    } else {
+      return WidgetLocation(null, -11.h, 0, null);
+    }
+  }
+}