Browse Source

[feat]星座恋爱分析,布局调整

hezihao 8 tháng trước cách đây
mục cha
commit
2f899227c7
1 tập tin đã thay đổi với 54 bổ sung42 xóa
  1. 54 42
      lib/module/zodiac_love_intimacy/zodiac_love_intimacy_page.dart

+ 54 - 42
lib/module/zodiac_love_intimacy/zodiac_love_intimacy_page.dart

@@ -347,19 +347,20 @@ class ZodiacLoveIntimacyPage extends BasePage<ZodiacLoveIntimacyController> {
       var info = controller.zodiacLoveIntimacyLoveInfoResponse.value;
       var meme = info?.meme ?? "";
       var explain = info?.explain ?? "";
-      if (meme.isEmpty || explain.isEmpty) {
+      // 无数据,不显示
+      if (meme.isEmpty && explain.isEmpty) {
         return SizedBox(height: 67.h);
       }
-      return Container(
-        width: double.infinity,
-        margin: EdgeInsets.symmetric(horizontal: 30.w),
-        child: Stack(
-          alignment: Alignment.center,
-          children: [
-            Positioned(
+      return Stack(
+        alignment: Alignment.center,
+        children: [
+          Positioned(
+            // IntrinsicWidth,包裹内容,宽度不撑大到屏幕宽度
+            child: IntrinsicWidth(
               child: Container(
                 alignment: Alignment.center,
-                padding: EdgeInsets.symmetric(vertical: 8.w),
+                padding: EdgeInsets.symmetric(vertical: 8.h, horizontal: 42.w),
+                // 圆角背景
                 decoration: ShapeDecoration(
                   color: const Color(0x29B80081),
                   shape: RoundedRectangleBorder(
@@ -367,52 +368,63 @@ class ZodiacLoveIntimacyPage extends BasePage<ZodiacLoveIntimacyController> {
                   ),
                 ),
                 child: Column(
+                  mainAxisSize: MainAxisSize.min,
                   children: [
                     // 梗语标题
-                    Text(
-                      meme,
-                      style: TextStyle(
-                        color: ColorName.white,
-                        fontSize: 12.sp,
-                        fontWeight: FontWeight.w500,
+                    Visibility(
+                      visible: meme.isNotEmpty,
+                      child: Container(
+                        margin: EdgeInsets.only(bottom: 2.h),
+                        child: Text(
+                          meme,
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            color: ColorName.white,
+                            fontSize: 12.sp,
+                            fontWeight: FontWeight.w500,
+                          ),
+                        ),
                       ),
                     ),
-                    SizedBox(height: 2.h),
                     // 星座梗语
-                    Text(
-                      explain,
-                      style: TextStyle(
-                        color: ColorName.white,
-                        fontSize: 12.sp,
-                        fontWeight: FontWeight.w500,
+                    Visibility(
+                      visible: explain.isNotEmpty,
+                      child: Text(
+                        explain,
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          color: ColorName.white,
+                          fontSize: 12.sp,
+                          fontWeight: FontWeight.w500,
+                        ),
                       ),
                     ),
                   ],
                 ),
               ),
             ),
-            // 左上角的逗号
-            Positioned(
-              top: 5.w,
-              left: 8.w,
-              child: Assets.images.iconNewUserZodiacLeft.image(
-                width: 13.w,
-                height: 13.w,
-                fit: BoxFit.contain,
-              ),
+          ),
+          // 左上角的逗号
+          Positioned(
+            top: 5.w,
+            left: 8.w,
+            child: Assets.images.iconNewUserZodiacLeft.image(
+              width: 13.w,
+              height: 13.w,
+              fit: BoxFit.contain,
             ),
-            // 右下角的逗号
-            Positioned(
-              right: 8.w,
-              bottom: 5.w,
-              child: Assets.images.iconNewUserZodiacRight.image(
-                width: 13.w,
-                height: 13.w,
-                fit: BoxFit.contain,
-              ),
+          ),
+          // 右下角的逗号
+          Positioned(
+            right: 8.w,
+            bottom: 5.w,
+            child: Assets.images.iconNewUserZodiacRight.image(
+              width: 13.w,
+              height: 13.w,
+              fit: BoxFit.contain,
             ),
-          ],
-        ),
+          ),
+        ],
       );
     });
   }