如何在SwiftUI中实现iOS照片应用的动画Tab按钮？

我想重现iOS照片应用里的那种动画切换按钮（类似底部标签切换时的滑动高亮效果），把这类按钮用在TabView或者类似组件里替代默认按钮。想问下SwiftUI有没有内置这类按钮？或者有什么靠谱的实现方法？

我自己写了一段示例代码，但感觉思路不对：

struct ContentView: View {
    @State private var selection = 0

    var body: some View {
            ZStack(alignment: .leading) {
                RoundedRectangle(cornerRadius: 10)
                    .frame(width: 100, height: 50)
                    .offset(x: CGFloat(selection * 100), y: 0)
                HStack {
                    Button("Tap Me") {
                        withAnimation {
                            selection = 0
                        }
                    }
                    Spacer()
                    Button("Tap Me") {
                        withAnimation {
                            selection = 1
                        }
                    }
                    Spacer()
                    Button("Tap Me") {
                        withAnimation {
                            selection = 2
                        }
                    }
                }
                .frame(width: 300)
            }
            .padding()
        .background(.green)
    }
}

当前实现效果：

1. SwiftUI没有内置这类组件 #

iOS照片应用的这种滑动高亮切换按钮属于自定义交互组件，SwiftUI原生没有直接提供对应的内置控件，需要自行实现或基于现有组件改造。

2. 更合理的实现思路和代码示例 #

你当前的代码问题在于用Spacer分隔按钮导致按钮位置和高亮条的偏移计算不匹配，且未和TabView结合。下面提供两种可行方案：

方案一：自定义TabView标签栏

直接给TabView替换自定义底部标签栏，实现滑动高亮效果：

struct PhotoStyleTabView: View {
    // 标签项数据
    private let tabs = ["照片", "回忆", "共享"]
    @State private var selectedTab = 0
    // 高亮条的偏移量，根据选中项动态计算
    @State private var highlightOffset: CGFloat = 0
    
    var body: some View {
        TabView(selection: $selectedTab) {
            // 各个页面内容
            Color.red.tabItem { Text("照片") }.tag(0)
            Color.blue.tabItem { Text("回忆") }.tag(1)
            Color.yellow.tabItem { Text("共享") }.tag(2)
        }
        .overlay(alignment: .bottom) {
            // 自定义底部标签栏
            VStack {
                Spacer()
                ZStack(alignment: .leading) {
                    // 滑动高亮背景
                    RoundedRectangle(cornerRadius: 12)
                        .fill(Color.white.opacity(0.2))
                        .frame(width: UIScreen.main.bounds.width / CGFloat(tabs.count) - 20, height: 40)
                        .offset(x: highlightOffset)
                    
                    HStack(spacing: 0) {
                        ForEach(0..<tabs.count, id: \.self) { index in
                            Button(action: {
                                withAnimation(.spring(response: 0.3, dampingFraction: 0.7)) {
                                    selectedTab = index
                                    // 更新高亮条偏移
                                    highlightOffset = (UIScreen.main.bounds.width / CGFloat(tabs.count)) * CGFloat(index) + 10
                                }
                            }) {
                                Text(tabs[index])
                                    .frame(maxWidth: .infinity, maxHeight: 40)
                                    .foregroundColor(selectedTab == index ? .white : .gray)
                            }
                        }
                    }
                }
                .frame(height: 40)
                .padding(.horizontal, 10)
                .padding(.bottom, 20)
            }
        }
        .onAppear {
            // 初始化高亮条位置
            highlightOffset = (UIScreen.main.bounds.width / CGFloat(tabs.count)) * 0 + 10
        }
        .tabViewStyle(.page(indexDisplayMode: .never)) // 隐藏原生标签栏
    }
}

方案二：独立的切换组件（不依赖TabView）

如果只需要独立的切换按钮组，可以优化你原来的代码，让按钮和高亮条位置精准对应：

struct AnimatedTabButtons: View {
    let titles: [String]
    @Binding var selection: Int
    
    private let buttonWidth: CGFloat = 100
    private let buttonHeight: CGFloat = 50
    
    var body: some View {
        ZStack(alignment: .leading) {
            // 高亮背景
            RoundedRectangle(cornerRadius: 10)
                .fill(Color.blue.opacity(0.3))
                .frame(width: buttonWidth, height: buttonHeight)
                .offset(x: CGFloat(selection) * buttonWidth, y: 0)
            
            // 按钮组，均匀分布
            HStack(spacing: 0) {
                ForEach(0..<titles.count, id: \.self) { index in
                    Button(titles[index]) {
                        withAnimation(.easeInOut(duration: 0.3)) {
                            selection = index
                        }
                    }
                    .frame(width: buttonWidth, height: buttonHeight)
                    .foregroundColor(selection == index ? .blue : .black)
                }
            }
        }
        .frame(width: buttonWidth * CGFloat(titles.count), height: buttonHeight)
    }
}

// 使用示例
struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        AnimatedTabButtons(titles: ["全部", "图片", "视频"], selection: $selection)
            .padding()
    }
}

3. 关键实现要点 #

• 用withAnimation包裹状态变化，实现平滑过渡
• 高亮条的偏移量根据选中项索引和按钮宽度精准计算，避免位置偏差
• 按钮采用固定宽度或按父视图均分，保证高亮条和按钮完全对齐
• 结合TabView使用时，需隐藏原生标签栏，替换为自定义交互组件

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