为选中的标签添加背景指示器

识别选定标签

首先，你需要一个方法来知道哪个标签当前被选中。你可以使用 @State 属性包装器来存储当前选中的标签索引。例如，@State private var selectedTab: Int = 0 将初始化第一个标签为选中状态。 🥳

这个状态变量将驱动你的UI更新，确保指示器始终跟随正确的标签。这是一个非常核心的步骤，因为它为后续的动画奠定了基础。

构建指示器视图

接下来，你需要创建一个视图作为选中标签的背景指示器。这个指示器可以是一个简单的 RoundedRectangle。你可以给它一个填充颜色，比如 .fill(.blue)，并设置一个圆角。

RoundedRectangle(cornerRadius: 10)
    .fill(.blue)
    .frame(width: 50, height: 4) // 示例尺寸

这个指示器将是动态的，它的位置和大小会根据选中的标签而变化。

将指示器放置在标签栏中

将这个指示器视图放置在你的自定义标签栏的 ZStack 中。ZStack 允许你将视图堆叠起来，这样指示器就可以位于标签的下方或上方。

通常，你会将指示器放在标签视图的下方，这样它就像一个背景高亮。确保指示器视图在 ZStack 中的顺序是正确的，以实现预期的视觉效果。

动态调整指示器位置和大小

这是最激动人心的部分！你需要根据 selectedTab 的值来动态调整指示器的位置和大小。你可以使用 GeometryReader 来获取每个标签的尺寸和位置信息。

当你点击一个标签时，selectedTab 的值会更新。然后，你可以计算出对应标签的 x 偏移量和宽度，并将这些值应用到你的指示器视图上。

• 使用 .offset(x: ...) 来改变指示器的水平位置。
• 使用 .frame(width: ...) 来调整指示器的宽度。

例如，如果你的标签是等宽的，你可以简单地根据 selectedTab 乘以标签宽度来计算偏移量。如果标签宽度不同，你需要更精确地测量每个标签的几何信息。

动画效果的初步实现

虽然我们将在后续章节深入探讨 matchedGeometryEffect，但现在你可以先使用 .animation(.spring(), value: selectedTab) 给指示器的移动添加一个基本的动画效果。 🚀

这将使指示器在不同标签之间切换时，有一个平滑的过渡，而不是突然跳跃。这种初步的动画能极大地提升用户体验，让你的标签栏看起来更加精致和专业。用户会非常喜欢这种流畅的交互！