ソースを参照

[feat]亲密度分析,报告卡片,自适应高度,并增加未解锁的报告卡片

hezihao 9 ヶ月 前
コミット
4313c454b8

BIN
assets/images/icon_intimacy_analyse_report_unlock_placeholder.webp


+ 3 - 0
lib/module/intimacy_analyse/intimacy_analyse_upload/intimacy_analyse_upload_controller.dart

@@ -52,6 +52,9 @@ class IntimacyAnalyseUploadController extends BaseController {
   // TODO hezihao,测试报告生成中
   // RxString reportMarkdownData = "".obs;
 
+  /// 报告是否已解锁
+  Rx<bool> isReportUnlock = true.obs;
+
   @override
   void onInit() {
     super.onInit();

+ 11 - 8
lib/module/intimacy_analyse/intimacy_analyse_upload/intimacy_analyse_upload_page.dart

@@ -268,14 +268,17 @@ class IntimacyAnalyseUploadPage
 
   /// 分析报告
   Widget _buildAnalysisReport() {
-    return Column(
-      children: [
-        SizedBox(height: 12.h),
-        IntimacyAnalyseReportWidget(
-          reportContent: controller.reportMarkdownData.value,
-        ),
-      ],
-    );
+    return Obx(() {
+      return Column(
+        children: [
+          SizedBox(height: 12.h),
+          IntimacyAnalyseReportWidget(
+            reportContent: controller.reportMarkdownData.value,
+            unlock: controller.isReportUnlock.obs.value.value,
+          ),
+        ],
+      );
+    });
   }
 
   /// 预测方向结果

+ 78 - 29
lib/module/intimacy_analyse/widget/intimacy_analyse_report_widget.dart

@@ -12,10 +12,21 @@ class IntimacyAnalyseReportWidget extends StatelessWidget {
   /// 报告内容
   final String reportContent;
 
-  const IntimacyAnalyseReportWidget({super.key, required this.reportContent});
+  /// 是否已解锁
+  final bool unlock;
+
+  const IntimacyAnalyseReportWidget({
+    super.key,
+    required this.reportContent,
+    required this.unlock,
+  });
 
   @override
   Widget build(BuildContext context) {
+    // 未解锁
+    if (!unlock) {
+      return UnlockReportCardWidget();
+    }
     return reportContent.isEmpty
         // 报告生成中
         ? CreatingReportCardWidget()
@@ -34,7 +45,6 @@ class ExistReportCardWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ReportCardFrameWidget(
-      height: 850.h,
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
@@ -311,7 +321,6 @@ class CreatingReportCardWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return ReportCardFrameWidget(
-      height: 300.h,
       child: Container(
         decoration: ShapeDecoration(
           color: ColorName.white,
@@ -348,39 +357,76 @@ class CreatingReportCardWidget extends StatelessWidget {
   }
 }
 
+/// 未解锁时的报告卡片
+class UnlockReportCardWidget extends StatelessWidget {
+  const UnlockReportCardWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ReportCardFrameWidget(
+      child: Container(
+        padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 6.w),
+        decoration: ShapeDecoration(
+          color: ColorName.white,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(30.r),
+          ),
+        ),
+        child: Center(
+          child: Column(
+            // 垂直水平都居中
+            mainAxisAlignment: MainAxisAlignment.center,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
+              // 占位图
+              Assets.images.iconIntimacyAnalyseReportUnlockPlaceholder.image(
+                width: 300.w,
+                height: 303.h,
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
 /// 报告卡片框架组件,只定义报告卡片的基本框架,例如卡片背景和顶部的标题,内容由子组件来实现
 class ReportCardFrameWidget extends StatelessWidget {
-  // 卡片高度
-  final double height;
-
   /// 内容子组件
   final Widget child;
 
-  const ReportCardFrameWidget({
-    super.key,
-    required this.height,
-    required this.child,
-  });
+  const ReportCardFrameWidget({super.key, required this.child});
 
   @override
   Widget build(BuildContext context) {
     // 卡片背景
     return Container(
-      height: height,
       margin: EdgeInsets.only(left: 12, right: 12, bottom: 0),
       padding: EdgeInsets.only(bottom: 12),
       decoration: BoxDecoration(
-        image: DecorationImage(
-          image: Assets.images.bgIntimacyAnalyseReportPreview.provider(),
-          fit: BoxFit.fill,
+        // image: DecorationImage(
+        //   image: Assets.images.bgIntimacyAnalyseReportPreview.provider(),
+        //   fit: BoxFit.fill,
+        // ),
+        // 渐变背景
+        gradient: LinearGradient(
+          colors: [Color(0xFFE9E2FF), Color(0xFFF1F5FF)],
+          begin: Alignment.centerLeft,
+          end: Alignment.centerRight,
         ),
+        borderRadius: BorderRadius.all(Radius.circular(20.r)),
       ),
-      child: Stack(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
         children: [
           // 顶部的图标和标题
-          Positioned(left: 0, right: 0, top: 0, child: _buildReportTopLayout()),
+          _buildReportTopLayout(),
           // 内容区域
-          Positioned(top: 51, left: 12, right: 12, bottom: 5, child: child),
+          Container(
+            padding: EdgeInsets.only(top: 3, left: 12, right: 12, bottom: 5),
+            child: child,
+          ),
         ],
       ),
     );
@@ -388,17 +434,20 @@ class ReportCardFrameWidget extends StatelessWidget {
 
   /// 报告的顶部布局-包含:图标和标题
   Widget _buildReportTopLayout() {
-    return Row(
-      children: [
-        Assets.images.iconIntimacyAnalyseReportPreviewLove.image(
-          width: 50,
-          height: 48,
-        ),
-        Assets.images.iconIntimacyAnalyseReportPreviewTitle.image(
-          width: 178,
-          height: 24,
-        ),
-      ],
+    return Container(
+      margin: EdgeInsets.only(left: 12.w, top: 12.h),
+      child: Row(
+        children: [
+          Assets.images.iconIntimacyAnalyseReportPreviewLove.image(
+            width: 50,
+            height: 48,
+          ),
+          Assets.images.iconIntimacyAnalyseReportPreviewTitle.image(
+            width: 178,
+            height: 24,
+          ),
+        ],
+      ),
     );
   }
 }

+ 7 - 0
lib/resource/assets.gen.dart

@@ -495,6 +495,12 @@ class $AssetsImagesGen {
         'assets/images/icon_intimacy_analyse_report_preview_title.webp',
       );
 
+  /// File path: assets/images/icon_intimacy_analyse_report_unlock_placeholder.webp
+  AssetGenImage get iconIntimacyAnalyseReportUnlockPlaceholder =>
+      const AssetGenImage(
+        'assets/images/icon_intimacy_analyse_report_unlock_placeholder.webp',
+      );
+
   /// File path: assets/images/icon_intimacy_analyse_unlock.webp
   AssetGenImage get iconIntimacyAnalyseUnlock =>
       const AssetGenImage('assets/images/icon_intimacy_analyse_unlock.webp');
@@ -946,6 +952,7 @@ class $AssetsImagesGen {
     iconIntimacyAnalyseReportPreviewBubbleSymbol,
     iconIntimacyAnalyseReportPreviewLove,
     iconIntimacyAnalyseReportPreviewTitle,
+    iconIntimacyAnalyseReportUnlockPlaceholder,
     iconIntimacyAnalyseUnlock,
     iconIntimacyAnalyseUploadTop,
     iconIntimacyAnalysisReportCreating,

+ 6 - 0
lib/widget/markdown/markdown_viewer.dart

@@ -12,7 +12,13 @@ class MarkdownViewer extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Markdown(
+      // 文档内容
       data: content,
+      // 让Markdown高度自适应内容
+      shrinkWrap: true,
+      // 禁用自身滚动
+      physics: const NeverScrollableScrollPhysics(),
+      // 配置图片加载器
       imageBuilder:
           (uri, title, alt) => CachedNetworkImage(imageUrl: uri.toString()),
     );