From 8c921955582cd190ae102fb4bb3833fdd0b35ae1 Mon Sep 17 00:00:00 2001 From: laoyang Date: Thu, 22 Oct 2026 08:07:05 +0800 Subject: [PATCH] =?UTF-8?q?v75b=20=E8=AF=A6=E6=83=85=E9=A1=B5=E5=8D=A1?= =?UTF-8?q?=E7=89=87=E6=BA=A2=E5=87=BA=E7=88=B6=E5=AE=B9=E5=99=A8=EF=BC=88?= =?UTF-8?q?=E9=A2=98=E5=9B=BE=E8=B4=B4=E5=88=B0=E5=B1=8F=E5=B9=95=E5=B7=A6?= =?UTF-8?q?=E5=8F=B3=E8=BE=B9=E7=BC=98=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 真机实测抓出来的：详情页题图 x=0..1080（满屏），而列表卡 x=50..1030。 图比下面的信息区宽 100px，左右各突 50px 贴到屏幕边缘。 根因：详情页每张卡写的是 `.width('100%')` + `.margin({left/right: pagePad})`。 ArkUI 里 `width('100%')` 量的是**父容器宽度**，margin 再往外挤 ⇒ 溢出父容器。 修法照列表页一直以来的写法：**父容器给 padding，卡片只写 width('100%')、 不写左右 margin**。改了三处：heroCard、nodeGroups 空态、stageGroup。 实测：详情题图 x=50..1030 (w=980)，与所属卡片 50..1030 完全对齐。 探针 24/0，守卫 932/0，反向验证 165/0。 --- .../main/ets/pages/trips/FbTripDetailPage.ets | 32 +++++++++++++++---- 1 file changed, 25 insertions(+), 7 deletions(-) diff --git a/entry/src/main/ets/pages/trips/FbTripDetailPage.ets b/entry/src/main/ets/pages/trips/FbTripDetailPage.ets index 9fb1976..115a29e 100644 --- a/entry/src/main/ets/pages/trips/FbTripDetailPage.ets +++ b/entry/src/main/ets/pages/trips/FbTripDetailPage.ets @@ -421,10 +421,24 @@ export struct FbTripDetailPage { .alignItems(HorizontalAlign.Start) .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: 20, bottom: 20 }) } else { - // ---- 题图 + 信息区 ---- - this.heroCard() - // ---- 行程分组 ---- - this.nodeGroups() + /* ---- 题图 + 信息区 / 行程分组 ---- + 🔴🔴 为什么外面要**再包一层带 padding 的 Column**（v75 真机实测）： + 原来各卡片自己写 `.width('100%')` + `.margin({left/right: pagePad})`， + 在 ArkUI 里 **`width('100%')` 量的是"父容器宽度"，margin 再从那个宽度 + 往外挤** ⇒ 卡片实际宽度 = 父宽，但左右各被 margin 推出去 16vp + ⇒ **溢出父容器**。真机实测：详情页题图 x=0..1080（满屏 1080）， + 而列表卡是 x=50..1030（980）—— 图比下面的信息区宽 100px， + 左右各突 50px 到屏幕边缘，与用户"充满整个列表的宽度"的"列表" + （= 卡片自己的宽度，不是屏幕宽度）不符。 + ✅ 正确写法照列表页：**父容器给 padding，卡片只写 `width('100%')`、 + 不写左右 margin**。这样"整宽"天然等于卡片内容宽。 */ + Column({ space: 0 }) { + this.heroCard() + this.nodeGroups() + } + .width('100%') + .padding({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + .alignItems(HorizontalAlign.Start) } } .width('100%') @@ -762,7 +776,9 @@ export struct FbTripDetailPage { .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) .clip(true) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad }) + // ⚠️ **不写左右 margin**：外层已有 pagePad 的 padding，这里再写 margin + // 会在 `width('100%')` 之上再往外挤 ⇒ 溢出父容器（真机实测过，见 build()）。 + .alignItems(HorizontalAlign.Start) } /** @@ -828,7 +844,8 @@ export struct FbTripDetailPage { .width('100%') .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: FbMetric.cardGap }) + // ⚠️ 同上：不写左右 margin（外层已有 pagePad padding），只留纵向间距 + .margin({ top: FbMetric.cardGap }) } else { this.stageGroup('plan', '计划的行程', '还没走 —— 可以修正 / 完成 / 标记未成行') this.stageGroup('actual', '实际行程', '已走过 —— 也出现在日历与首页「往年今日」') @@ -868,7 +885,8 @@ export struct FbTripDetailPage { .backgroundColor(FbColors.surface) .borderRadius(FbMetric.radius) .border({ width: { left: 3 }, color: fbStageTone(stage).hex }) - .margin({ left: FbMetric.pagePad, right: FbMetric.pagePad, top: FbMetric.cardGap }) + // ⚠️ 同上：不写左右 margin（外层已有 pagePad padding），只留纵向间距 + .margin({ top: FbMetric.cardGap }) } }