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 }) } }