SwiftUI中如何消除内容与返回按钮之间的间距

一、消除标题与返回按钮的间距 #

首页里“United Kingdom”标题和返回按钮之间的多余间距，直接用CSS调整即可：

• 找到标题或按钮所在元素的类名，强制清零margin和padding：

/* 示例：假设标题类是page-title，按钮容器是back-btn-wrap */
.page-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* 如果按钮容器和标题紧挨着，直接去掉容器下方的间距 */
.back-btn-wrap + .page-title {
  margin-top: 0;
}

• 要是框架自带全局样式导致的问题，就在全局样式里重置标题元素的默认外边距：

h1, .page-heading {
  margin-top: 0;
}

二、第二页移除“Locations”返回按钮+消除额外间距 #

进入“Diamond-Encrusted Ring”页面后，要去掉“Locations”返回按钮并解决变大的间距，两种办法任选：

1. 页面组件/路由层面控制显示（适合单页应用） #

比如React或Vue项目中，直接在目标页面组件里加判断，不让该按钮显示：

• React代码示例：

function DiamondRingPage() {
  return (
    <div className="page-box">
      {/* 仅当前不是钻石戒指页面时，显示返回Locations的按钮 */}
      {window.location.pathname !== '/diamond-encrusted-ring' && (
        <button className="back-btn locations-back">返回Locations</button>
      )}
      <h1>Diamond-Encrusted Ring</h1>
      {/* 页面其他内容 */}
    </div>
  )
}

• Vue代码示例：

<template>
  <div class="page-box">
    <button v-if="$route.path !== '/diamond-encrusted-ring'" class="back-btn locations-back">返回Locations</button>
    <h1>Diamond-Encrusted Ring</h1>
    <!-- 页面其他内容 -->
  </div>
</template>

2. CSS精准隐藏（适合静态页面或快速修复） #

给第二页加专属类，用CSS把按钮藏起来，同时清掉按钮占位的间距：

/* 假设第二页的容器类是diamond-ring-page */
.diamond-ring-page .locations-back {
  display: none;
}
/* 清掉按钮容器的间距，避免空占位置 */
.diamond-ring-page .back-btn-wrap {
  margin-bottom: 0;
  padding-bottom: 0;
}

内容的提问来源于stack exchange，提问作者TotallyNotTeo